Angular 将动态数据传递给嵌套组件

我有一个包含订单列表的主页（“订单列表”组件），每次单击订单时，我都会通过路由器出口打开一个“订单详细信息”组件

在order details组件中，我在html中有一个组件选择器（“app-list-products”），在该选择器中，我希望传递订单产品的数据（“order.products”）

im使用NgRX状态管理，并在OnInit循环中获取“列表订单”组件中的订单数据。我对“订单详细信息”组件也做了同样的操作（以获得正确的订单详细信息）

但每次我更改查看的订单（从“列表订单”视图中选择），我得到的产品 是我要的上一批货

谁能解释一下为什么会这样？我怎样才能修好它

list-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-details.html：

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

---

借助问题中的帮助和步骤：

解决方案：

在details-order.ts中，我添加了：

private ref:ChangeDetectorRef

到构造函数

并调用

this.ref.detectChanges（）（分配给“this.order”后）

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

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