Как протолкнуть данные между маршрутами в Angular

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. ПОЛУЧИТЬ элемент по идентификатору

Я понимаю, что между этими маршрутами есть ненужный вызов API, так как объект элемента, который мне нужен, уже находится в массиве. Я планирую провести рефакторинг вызова резолвера 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.....
    }
}

Вместо routerLinking к маршруту используйте метод для перенаправления и добавления элемента в сервис:

так вместо

<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});

Вы можете сделать то же самое с маршрутизатором:

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

Затем на следующей странице вы добавите это в ngOnInit:

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