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

Question

我有一个带有订单列表的主页面（'list-orders'组件），每次单击订单时，我都会通过路由器出口打开'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>

list-order.ts：

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

order-details.html：

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

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

Answer 1

借助问题的帮助和步骤：

How to re-render a component manually Angular 5

Is there any way I can pass dynamic data to a component in Angular?

解决方案：

在我添加的details-order.ts中：

private ref: ChangeDetectorRef到构造函数

在subscribe方法的末尾（在分配给'this.order'之后，称为this.ref.detectChanges();）