Question

假设我在路由item-list中得到了一个/items/数组。 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调用，因为我需要的item对象已经在数组中。如果该项目不存在（由于页面刷新或直接链接），我计划重构解析器以调用API

我将如何处理？

注意：在Ionic3中，可以这样操作：navCtrl.push('ItemPage', {item: item});

Answer 1

使用服务。除了简单值，您无法将数据传递到路由。

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

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

所以而不是

<a routerLink

这样做：

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

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

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

Answer 2

注意：在Ionic3中，可以这样操作：navCtrl.push（'ItemPage'， {item：item}）;

您可以使用 router 做同样的事情：

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

然后在下一页中将此内容添加到ngOnInit：

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

如何在Angular的路线之间推送数据

2 个答案: