передача динамических данных во вложенные компоненты

у меня есть главная страница со списком заказов (компонент «список заказов»), каждый раз, когда я нажимаю заказ, я открываю компонент «детали заказа» через маршрутизатор-выход.

в компоненте сведений о заказе у меня есть в html селектор компонентов ('app-list-products'), в этом селекторе я хочу передать данные продуктов заказа ('order.products')

я использую управление состоянием NgRX и получаю данные заказа в компоненте list-orders в цикле OnInit. я делаю то же самое для компонента «детали заказа» (чтобы получить правильные детали заказа).

но каждый раз, когда я меняю порядок просмотра (выбирая из представления «список заказов»), продукты, которые я получаю, относятся к предыдущему порядку, который я хотел.

может кто-нибудь объяснить мне, почему это происходит? как я могу это исправить?

список-order.html:

<ul class="list-group" *ngIf="orders.length">
    <li
      class="list-group-item"
      *ngFor="let order of orders; let i=index">
      <a routerLink='{{i}}'>
        <p>Name: {{ order.name }}</p>
      </a>
    </li>
  </ul>

список-order.ts:

ngOnInit() {
    this.subscription = this.store.select('order')
      .pipe(map(orderState => {
        return orderState.orders;
      }))
      .subscribe(orders=> {
        this.orders = orders;
      });
  }

детали заказа.html:

<div class="row" *ngIf="order">
    <p>name: {{ order.name|| "------" }}</p>
    <app-list-products [orderProducts]="order.products"></app-list-products>
</div>

детали заказа.ts

order: Order = null;
ngOnInit() {
    let currUrl;
    this.routeSub = this.route.params.pipe(
      switchMap(() => {
        currUrl = this.route.snapshot['_routerState'].url.substring(1).split('/');
        return this.store.select('order')
       }))
      .subscribe(orderState => {
          this.order = orderState['order'][+currUrl[1]];
      });
  }