javascript - Angular:history.state.data 返回未定义而不是最后设置的数据对象？

Question

我有一个订单表..每个表行代表一个订单实体，当用户单击特定行时，它应该重定向到带有单击订单详细信息的新 View 。这两个组件不是父级和子级，我想要将有关点击订单行的数据传递到导航页面..
我尝试了以下方法

 <tr *ngFor="let order of allOrders" routerLink="../orderdetails" [state]=”{data:order}”>
                <td>{{order.orderRef}}</td>
                <td>{{order.receiptRef}}</td>
                <td>{{order.customer}}</td>
                <td>{{order.orderDate}}</td>
                <td>{{order.salesMan}}</td>
                <td>{{order.total}}</td>
                <td>{{order.status}}</td>
                <td>{{order.session}}</td>
                <td>
                </td>
              </tr>

这会导致 View 导航到 Orderdetails

 ngOnInit(): void {
    console.log(history.state)
    console.log(history.state.data);
  }

ngOnInit() 内部 console.log(history.state)日志 {navigationId: 1}但是 console.log(history.state.data)日志 undefined .

为什么我收到 undefined而不是我在 state 上设置的数据?

如何访问我传递给 state 的数据属性(property)？

Answer 1

经过一番研究，我发现 状态不适用于非 anchor 元素 .
为了解决这个问题，在以编程方式进行路由时，我们可以使用状态:
订单.html

<tr *ngFor="let order of allOrders" (click)="onNavToOrderDetails(order)">
   <td>{{order.orderRef}}</td>
   <td>{{order.receiptRef}}</td>
   ....
</tr>

订单.ts

import { Router } from '@angular/router';

constructor(
   private router: Router
) {}

onNavToOrderDetails(order: Order) {
   this.router.navigate(['routetodetailscomponent'], { state: {data: order} });
}

orderDetails.ts

ngOnInit(): void {
   console.log(history.state)
   console.log(history.state.data);
}