库组件上的 Angular 2 子路由未运行

Question

我有一个演示应用程序，用于测试我创建的自定义库。我正在导入我的库并在演示应用程序中使用自定义组件，并且运行良好，但我无法显示子路由（路由器出口）。子组件永远不会加载。

在我的演示应用程序中，我只有一个非常基本的角度组件，它引入了库组件。

演示应用程序：

我的演示页面加载于

localhost:4200/demo

。 该路线加载

demo-component.html

，即：

<library-component
      [name]="name"
      [phone]="phone">
</library-component>

演示

app-routing.module.ts:

const routes: Routes = [
   {
       path: '',
       pathMatch: 'full',
       redirectTo: 'landing-page'
   },
   {
     path: 'landing-page',
     loadChildren: () => import(./landing-page.module).then(m => m.LandingPageModule)
   {
      path: 'demo',
      loadchildren: () => import(./demo.module).then(m => m.DemoModule)
   }
]

@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})

export class AppRoutingModule {}

演示模块只是简单地导入LibraryComponentModule。这会将库组件的 HTML 加载到屏幕上。我的问题是让

router-outlet

加载我的库中的子路由/组件。

单独的库被导入演示应用程序：

我的

library component.html

：

<section>
    {{name}
    {{phone}}
    <router-outlet></router-outlet> --> This is the issue, never loads.
</section>

我的

library-routing.module.ts:

const routes: Routes = [
       path: '',
       component: LibraryComponent,
       children: [
           path: '', component: ChildLibraryComponent
        ]

  ] 

子库组件：（这不会为我加载）

我的

child-library.component.html:

<div>Hello World</div>

我的

child-library-routing.module.ts:

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

我正在显示姓名和电话输入，但路由器插座从未加载

ChildLibraryComponent

。我在这里缺少什么？我找不到其他任何东西可以解决我的问题。

Answer 1

首先，为什么我们需要

child-library-routing.module.ts

，路线不是作为子项添加到

library-routing.module.ts

中吗？

如果只有一个子库组件，为什么不需要嵌套路由，直接注入就可以了，而不是添加路由。

此外，您的图书馆路线格式不正确，不确定它是否有效。

const routes: Routes = [
       {
        path: '',
       component: LibraryComponent,
       children: [
           path: '', component: ChildLibraryComponent
        ]
      }
  ] 

'{}' 标记它都是单一路由路径。

最后，尝试去掉“”。相反，请提供正确的路线值。