导航到一个惰性组件，它是命名 secondary/aux 插座中惰性加载子模块的一部分

Question

有两个模块app和lazy模块。需要在命名的辅助插座中显示惰性组件。 'lazy component' 是子模块 'lazy'.

的一部分

导航：

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

在下面的答案中正确导航

应用程序模块：

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

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

惰性模块：

const routes: Routes = [
        {
          path: 'lazyComponent',
          component: 'lazyComponent'
        }
  ]

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

这不起作用，错误是 -> 错误：无法匹配任何路由。 URL 段：'lazyComponent'

Answer 1

以下路由器导航有效。

  this.router.navigate(['/', 'lazy', {outlet:{secondary:'lazyComponent'}}])

首先导航到应用模块路径，然后导航到惰性模块的辅助出口。

Answer 2

可以这样直接调用路径

this.router.navigate(['/lazy/lazyComponent'])

导航到一个惰性组件，它是命名 secondary/aux 插座中惰性加载子模块的一部分

Navigate to a lazy component which is a part of lazily loaded submodule in a named secondary/aux outlet

angular

angular-ui-router

lazy-loading

router-outlet