如何在Angular〔duplicate〕中的路由之间推送数据

Question

假设在route /items/中给了我一个< code>item-list数组。item-list.component.html看起来像这样:

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

我试图做的是将项对象从项目列表数组推送到下一页（或路由）/items/：item-id.

目前,我有它的方式建立与2资源

我意识到有一个不必要的API调用

我将如何处理这个问题？

注意:在Ionic3中可以这样做:< code>navCtrl.push('ItemPage '，{ item:item })；

Answer 1

注意：在Ionic3中，可以这样做：navCtrl。推送（'ItemPage'，{item:item}）；

你可以用路由器做同样的事情:

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

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

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

Answer 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.....
    }
}

使用方法将项目重定向并添加到服务，而不是route链接到路由:

所以而不是

<a routerLink

做的事:

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

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

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