在輔助路由中訪問子級：角度

Question

我將root路由定義為

 const routes: Routes = [{ path: '', component: HomeComponent }, { path: 'module1', loadChildren: './module1/module1.module#Module1Module' }, { path: '**', redirectTo: '' } ]; 

module1.routing.ts具有：

 const routes: Routes = [{ path: '', component: SubModule1Component, children: [{ path: 'mod1child1', component: SubMod1Child1Component }, { path: 'mod1child2', component: SubMod1Child2Component, children: [{ path: '', component: Outlet1Component, outlet: 'outlet1' }, { path: 'newout1', component: Outlet1NewComponent, outlet: 'outlet1' }, { path: '', component: Outlet2Component, outlet: 'outlet2', children: [{ path: 'childoutlet2', component: ChildOutlet2Component, outlet: 'outlet2' }], }, ], }, ], canActivate: [AuthGuardService], }, ]; 

當我導航到/module1/mod1child2時，此代碼有效，如下所示：

我上面圖片的HTML頁面是：

 <h1>Child 2</h1> <button [routerLink]="[{outlets: {'outlet1': ['newout1']}}]">Change Outlet 1</button> <button [routerLink]="[{outlets: {'outlet2': ['childoutlet2']}}]">Change Outlet 2</button> <div style="display: flex;"> <div style="display: grid ;border: 1px solid red; width: 50%;height: 100px;float:left"> <router-outlet name="outlet1"></router-outlet> </div> <div style="display: grid ;border: 1px solid green; width: 50%;height: 100px;float:left"> <router-outlet name="outlet2"></router-outlet> </div> </div> 

我無法加載

{ path: 'childoutlet2', component: ChildOutlet2Component , outlet: 'outlet2'}

通過單擊：

<button [routerLink]="[{outlets: {'outlet2': ['childoutlet2']}}]">Change Outlet 2</button>

我究竟做錯了什么。 我試過了

<button [routerLink]="['/module1/mod1child2',{outlets: {'outlet2': ['childoutlet2']}}]">
   Change Outlet 2
 </button>` 

但這似乎不起作用

Answer 1

這是aux路由的一個已知問題，已經存在了很長時間，沒有修復它的時間框架https://github.com/angular/angular/issues/10726 。 顯然，它固定在某一點，但更改已還原。 基本上，您的父路徑不能為空，您需要提供一個路徑。

      {
        path: 'out2', <--- cannot be empty
        component: Outlet2Component,
        outlet: 'outlet2',
        children: [
            { path: 'childoutlet2', component: ChildOutlet2Component , outlet: 'outlet2'}
        ],
      },

Answer 2

問題是您有2個空路徑，盡管正如@penleychan提到它是一個bug並分享類似的問題，我不認為它是一個bug，相反，我覺得您應該始終提供父path而不是像這樣使用空字符串'' 。 您可以通過在父級中指定路徑來修復它。

     {
        path: 'mod1child2',
        component: SubMod1Child2Component,
        children: [
          { path: '', component: Outlet1Component, outlet: 'outlet1' },
          { path: 'newout1', component: Outlet1NewComponent, outlet: 'outlet1' },
          {
            path: 'childoutlet2',
            component: Outlet2Component,
            outlet: 'outlet2',
            children: [
                { path: '', component: ChildOutlet2Component , outlet: 'outlet2'}
            ],
          },
        ],
      },

Answer 3

不幸的是，在使用loadChildren進行延遲加載時，這是一個已知問題。 但這很容易修復，您只需要為定義的每條新路線始終提供默認路線的名稱即可。 在這種情況下

{
    path: 'base',
    component: SubModule1Component,
    children: [
    ...
    ]
}

Answer 4

我在2年前遇到了該錯誤。

有一個拉動請求，您絕對應該1）簽出，2）用豎起大拇指進行投票，以便最終合並到https://github.com/angular/angular/pull/25483

我對此感到非常厭倦，並且不想重命名我的應用程序中的所有空路由以使其正常工作，所以我最終在獲取npm模塊之后從postinstall掛鈎中修補此修復程序...

遠非理想，但它確實有效，希望它可以在某個時候合並！

陰暗的，但如果您也想這樣，請檢查我對PR的評論https://github.com/angular/angular/pull/25483#issuecomment-495249672