如何在Angular中的路由之间推送数据[重复]

Posted 2023-02-22

【中文标题】如何在Angular中的路由之间推送数据[重复]

【英文标题】：How to push data between routes in Angular [duplicate]

【发布时间】：2019-01-10 14:53:55

【问题描述】：

假设我在路由 /items/ 中获得了一个 item-list 数组。 item-list.component.html 看起来像这样：

<div *ngFor="let item of items">
    ....
  <a [routerLink]="'/items/' + item.id">View Item</a>
</div>

我要做的是将item 对象从item-list 数组推送到下一页（或路由）/items/:item-id.

目前，我设置它的方式是使用 2 个解析器，每个路由一个： 1. 获取物品列表 2.通过id获取项目

我意识到这些路由之间存在不必要的 API 调用，因为我需要的项目对象已经在数组中。如果项目不存在（由于页面刷新或直接链接），我计划重构解析器调用 API

我该如何处理？

注意：在 Ionic3 中，可以这样完成：navCtrl.push('ItemPage', item: item);

【参考方案1】：

注意：在 Ionic3 中，可以这样完成：navCtrl.push('ItemPage', 项目：项目）；

你可以用 router 做同样的事情：

this.router.navigate(['./item-page', item: item]);

然后在您的下一页中，将其添加到ngOnInit：

ngOnInit() 
    this.route.params.subscribe(params => 
       console.log(params);
    );
  

【讨论】：

你不能像这样传递整个对象，它不会工作，它只会将它作为查询参数传递，而不是实际的对象。

【参考方案2】：

使用服务。除了简单值之外，您不能将数据传递给路由。

export class FirstComponent 
   constructor(private someService: SomeService)

   someMethod(item) 
     this.someService.currentItem = item;
   


export class SomeService 
  currentItem: any;


export class SecondComponent 
   constructor(private someService: SomeService)

   someMethod() 
    // now you have the item
    this.currentItem.....
    

而不是router链接到一个路由，使用该方法重定向并将项目添加到服务中：

所以而不是

<a routerLink

做：

*ngFor="let item of items"
<button (click)="route(item)"

myMethod(item) 
  this.someService.currentItem = item;
  this.router.navigate('/route....')

语法不准确；这只是一个例子