角 – 主要路由器插座内的辅助路由器插座

我正在尝试在主路由器插座内使用辅助路由器插座.

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'
最佳答案
我尝试使用延迟加载和命名路由器插座,并发现以下事实:

>辅助路径必须是路径不是”的父路线的子路径.他们不会像空路径的孩子一样工作.它可能会很快修复.
>辅助路线在父路线中被隔离.它们的匹配规则与标准的Angular路由规则完全不同.
>如果我们延迟加载具有辅助路由的模块,我们需要将默认空路径路由重定向到具有非空路径的路由,该路径具有包含命名< router-outlet>的组件.它的孩子将是辅助路线和其他儿童路线. (可能会很快修复,与第1点相同.)
>您可以通过以下方式加载指定的插座:url(parentRoute / outletName:[‘outletPath’,param]),或使用路由器链接指令([routerLink] = [‘parentRoutes’,{outlets:{outletName:[‘outletPath’, param]}}],或以编程方式(this.router.navigate([‘parentRoutes’,{outlets:{outletName:[‘outletPath’,param]}}])
>要删除指定的插座,请在url,routerLink或代码中指定outlets:{outletName:null}.
>由于错误(将空路径子路径重定向到命名路由不起作用),默认情况下目前没有优雅的方法来加载命名路由,以后可以使用上述方法将其删除.它可能会很快修复.但是,您可以使用虚拟组件创建一个空路径,并在其构造函数中导航到加载默认命名路由的URL.或者您可以在父组件中执行此操作.

特别感谢Brandon

转载注明原文:角 – 主要路由器插座内的辅助路由器插座 - 代码日志