主路由器插座内的辅助路由器插座 [英] Auxiliary router-outlet inside primary router-outlet

问题描述

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

I'm trying to use an auxuliary router-outlet inside the primary router-outlet.

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>`
})

辅助组件

@Component({
    template: `Aux`
})

错误/page/(auxoutlet:auxpath) 将看到 Page 组件，但出现此错误:

Error /page/(auxoutlet:auxpath) will see Page component but with this error:

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

推荐答案

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

I resolved using this route configuration:

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

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

此网址有效:

/page/wrap/(auxoutlet:auxpath) 

这篇关于主路由器插座内的辅助路由器插座的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！