Question

有两个模块app和lazy模块。 Need确实要在已命名的辅助出口中显示惰性组件。 “惰性组件”是子模块“惰性”的一部分。

导航：

 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{ }

这不起作用，错误是-> 错误：无法匹配任何路由。网址段：“ lazyComponent”

Answer 1

以下路由器导航有效。

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

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

Answer 2

您可以像这样直接调用路径

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

导航到惰性组件，该组件是命名的辅助/辅助出口中延迟加载的子模块的一部分

2 个答案: