0

你好 Angular 程序员们，

在我的应用程序中，我有一个呈现“容器”组件的模块，该组件又具有一个菜单组件和一个命名的路由器插座（这里的想法是有一个子导航菜单和页面）。一旦我第一次导航到“容器”路由，就会发生导航，并且命名的路由器出口正确显示在 children[] 中指定的第一个子路由。但是，当我尝试导航到另一个“子”路由时，导航不会发生 - 但 URL 地址会发生变化 - 不会引发错误（干净的控制台）。

  1. 初始导航 URL：导航到ActiveDealComponent，呈现菜单，命名的路由器出口也呈现“仪表板”组件。

    URL：http://localhost:4200/deal/123456/(dealOutlet::dashboard)，由以下代码调用（位于锚标记内）：

    [routerLink]="['/deal', this.dealId, { outlets: { dealOutlet : [':dashboard'] } }]"

  2. 后续导航尝试：命名路由更改，但命名路由器出口不显示新的所需组件（仪表板仍然存在）。

    http://localhost:4200/deal/123456/(dealOutlet::assets)由以下代码调用（位于锚标记内）：

    [routerLink]="['/deal', this.dealId, { outlets: { dealOutlet : [':assets'] } }]"

交易模块.ts

RouterModule.forChild([
   {
    path: 'deal/:dealId',
    component: ActiveDealComponent (this is the "container" component),
    canActivate: [PageGuard],
    children: [
      {
        path: ':dashboard',
        component: DealoverviewComponent,
        canActivate: [PageGuard],
        outlet: 'dealOutlet'
      },
      {
        path: ':assets',
        component: AssetsComponent,
        canActivate: [PageGuard],
        outlet: 'dealOutlet'
      }
    ]
  }

主动交易.component.html

<div *ngIf="dealId">
  <app-deal-nav-menu [active-deal]="dealId">
  </app-deal-nav-menu>
</div>

<div class="all-deals">
  <div class="container body-content">
    <router-outlet name="dealOutlet"></router-outlet>
  </div>
</div>

注意：如果我更改子声明顺序，让我们先说“：资产”，然后说“：仪表板：”，然后资产被渲染但仪表板没有。

我在这里想念什么？

提前致谢。

4

1 回答 1

0

最后，“children:”数组中的冒号“:”是问题的根本原因。

于 2018-01-11T21:58:56.060 回答