惰性模块中的辅助路由器出口,使主模块中的主要出口变空

时间:2019-09-13 21:04:01

标签: angular lazy-loading router router-outlet named-routing

导航到懒惰组件,该组件将显示在名为辅助的插座中,可以看到它但主路由器插座将变空。

我需要分别显示两个路由器插座。

app.component.html:

    <router-outlet name="aux"></router-outlet>
    <router-outlet></router-outlet>

app.component.ts:

 this.router.navigate(['/lazy', {outlets:{ aux:'lazyComponent'}}]);

应用程序模块:

const routes: Routes = [
    {
      path: '',
      component: MainComponent
    }
    {
      path: 'lazy',
      loadChildren: './lazy.module#LazyModule'
    }
  ]

  @NgModule({
    declarations: [],
    imports: [
      RouterModule.forRoot(routes)
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

惰性模块:

  const routes: Routes = [
        {
          path: 'lazyComponent',
          component: 'lazyComponent',
          outlet: aux         //navigating here is making primary router outlet empty
        }
  ]

  @NgModule({
    declarations: [lazyComponent],
    imports: [ RouterModule.forChild(routes) ]
  })
  export class LazyModule{ }

尝试了其他路由器导航,例如:

  this.router.navigate([ {outlets:{ primary: 'lazy, aux:'lazyComponent'}}]); 

但是无法说未找到网址路由“ lazyComponent”。

我可以在惰性模块中以其他任何方式定义路由来实现此功能吗?

0 个答案:

没有答案