角路由使子路径全页接管

问题描述

我正在创建一个有订单历史记录的角度应用程序，它将显示所有先前的订单。选择一个后，它将打开一个新页面，并向您显示该特定订单的详细信息。由于2将被链接，因此我将订单商品创建为订单历史记录组件的子代，就像这样。

{
    path: 'history',component: OrderHistoryComponent,children: [
      {
        path: ':orderNo',component: OrderItemComponent,},]
  },

但是它像这样出现：

路径为localhost:4200/#/history/order1

如您所见，订单项组件位于订单历史记录组件下方。有没有办法将其作为子路线，但仍然占据整个页面？我认为这将是最好的信息获取方式，因为我将获得订单历史记录json，并将使用特定的订单号显示有关该订单的信息。

谢谢

解决方法

您可以将您的订单的着陆页作为子级添加到“历史记录”路线中，并使历史记录路线本身成为无组件路线，如下所示：

{
    path: 'history',children: [
      {
        path: '',component: OrderHistoryComponent,},{
        path: ':orderNo',component: OrderItemComponent,]
  },

然后，路径localhost:4200/#/history将显示OrderHistoryComponent，而路径localhost:4200/#/history/order1将显示OrderItemComonent。

您必须放置路由器出口的 OrderHistoryComponent 稍有变化，因此，每当访问OrderHistoryComponent的子级路由时，它们就会呈现在OrderHistoryComponent中存在的路由器出口中。

路由很好

       {
    path: 'history',children: [
      {
        path: ':orderNo',

在 OrderHistoryComponent 模板中，更改必须像这样进行：

<router-outlet></router-outlet>

然后尝试使用* ng如果该指令检查路由器的url，并且仅当路由路径与url / history匹配时才显示历史div，那么您的问题将得到解决。
OrderHistory Component.ts

 constructor(public router: Router){
       console.log(router.url);
  }

OrderHistory Component.html 除了路由器插座以外，您编写的代码均与* ngIf指令绑定。

<div
  *ngIf="router.url == '/history'"
>
Your order table will be here i think
</div>

angular angular-routing typescript typescript