主路由器插座內的輔助路由器插座

Question

我正在嘗試在主路由器插座內使用輔助路由器插座。

app.routing

export const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    {
        path: 'page',
        loadChildren: () => new Promise(function (resolve) {
            (require as any).ensure([], function (require: any) {
                resolve(require('../pages/page.module').default);
            });
        })
    }
];

app.component

@Component({
    template: `<h1>My App!</h1>
        <a [routerLink]="['/page']">Page</a>
        <router-outlet></router-outlet>`
})

page.module

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild([
            {
                path: '',
                component: PageComponent
            },
            {
                path: 'auxpath',
                component: AuxComponent,
                outlet: 'auxoutlet'
            }
        ])
    ],
  declarations: [PageComponent],
  exports: [PageComponent]
})
export default class PageModule {}

page.component

@Component({
    template: `Page <router-outlet name="auxoutlet"></router-outlet>`
})

aux.component

@Component({
    template: `Aux`
})

錯誤 / page /（auxoutlet：auxpath）將看到Page組件，但出現此錯誤：

EXCEPTION: Uncaught (in promise): Error: Cannot find the outlet auxoutlet to load 'AuxComponent'

Answer 1

我嘗試使用延遲加載和命名路由器插座，並發現以下事實：

1. 輔助路徑必須是路徑不是 ''的父路線的子路徑。 他們不會像空路徑的孩子一樣工作。 它可能會很快修復。
2. 輔助路線在父路線中被隔離。 它們的匹配規則與標准的Angular路由規則完全不同。
3. 如果我們使用輔助路由延遲加載模塊，我們需要將默認的空路徑路由重定向到具有非空路徑的路由，該路徑具有包含命名的<router-outlet> ，其子組件將是輔助路由和其他子路徑路線。 （可能會很快修復，與第1點相同）

4. 您可以通過以下方式加載指定的插座：url（ parentRoute/outletName:['outletPath', param] ），或使用路由器鏈接指令（ [routerLink]=['parentRoutes',{outlets: {outletName:['outletPath', param]}}] ，或以編程方式（ this.router.navigate(['parentRoutes',{outlets: {outletName:['outletPath', param]}}] ）

5. 要刪除指定的插座，請在url，routerLink或代碼中指定outlets: {outletName: null} 。

6. 由於一個錯誤（將空路徑子路徑重定向到命名路由不起作用），默認情況下目前沒有優雅的方法來加載命名路由，以后可以使用上述方法將其刪除。 它可能會很快修復。 但是，您可以使用虛擬組件創建一個空路徑，並在其構造函數中導航到加載默認命名路由的URL。 或者您可以在父組件中執行此操作。

特別感謝布蘭登

Answer 2

我解決了使用此路由配置：

RouterModule.forChild([
  {
    path: 'wrap',
    component: PageComponent,
    children: [
      {
        path: 'auxpath',
        component: AuxComponent,
        outlet: 'auxoutlet'
      }
    ]
  },

  {
    path: '',
    component: PageComponent
  }
])

此URL有效：

/page/wrap/(auxoutlet:auxpath)