主路由器插座内的辅助路由器插座

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) 将看到页面组件，但出现此错误：

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

Answer 1

我解决了使用这个路由配置：

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

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

这个URL有效：

/page/wrap/(auxoutlet:auxpath)

Answer 2

我尝试使用延迟加载并命名为 router-outlets，发现以下事实：

辅助路线必须 children 到 parent 路线，路径 而不是 是 ''。它们不会作为空路径路由的 children 工作。可能很快就会修复。
辅助路线在parent路线内被隔离。它们的匹配规则完全不同于标准的Angular路由规则。
如果我们使用辅助路由延迟加载模块，我们需要将默认的空路径路由重定向到具有 non-empty 路径的路由，该路由包含包含命名 <router-outlet> 及其 children 将是辅助路线和其他 child 路线。（可能很快会修复，同第1点）
您可以通过以下方式加载命名插座：url (parentRoute/outletName:['outletPath', param])，或使用路由器 Link 指令（[routerLink]=['parentRoutes',{outlets: {outletName:['outletPath', param]}}]，或以编程方式（ this.router.navigate(['parentRoutes',{outlets: {outletName:['outletPath', param]}}])
要删除命名插座，请在 url、路由器 Link 或代码中指定 outlets: {outletName: null}。
由于一个错误（将空路径child重定向到命名路由不起作用），目前没有优雅的方式默认加载命名路由并能够稍后删除用上面的方法。它可能很快就会修复。但是，您可能有一个带有虚拟组件的空路径，并且在其构造函数中，您导航到加载默认命名路由的 URL。或者您可以在 parent 组件中完成。

特别感谢Brandon

主路由器插座内的辅助路由器插座

Auxiliary router-outlet inside primary router-outlet

angular-routing

angular

angular-auxiliary-routes