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

Question

我有一个包含订单列表的主页（'list-orders' 组件），每次我单击一个订单时，我都会通过路由器出口打开一个 'order-details' 组件。

在订单详细信息组件中，我在 html 中有一个组件选择器 ('app-list-products')，在该选择器中我想传递订单产品的数据 ('order.products')

im 使用 NgRX 状态管理并在 OnInit 循环中的 'list-orders' 组件中获取订单数据。我对 'order-details' 组件执行相同操作（以获取正确的订单详细信息）。

但每次我更改我查看的顺序（从 'list-orders' 视图中选择）时，我得到的产品是我想要的之前的顺序。

谁能解释一下为什么会这样？我该如何解决？

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

顺序-details.html:

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

订单-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

问题中的帮助和步骤：

解决方法：

详细-order.ts 我补充说：

private ref: ChangeDetectorRef 到构造函数

并在订阅方法的末尾调用了 this.ref.detectChanges();（在分配给 'this.order' 之后）

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

passing dynamic data to nested components

components

ngoninit

angular