Question

我正在尝试在库中创建模块，该模块将具有不同的组件并且可以基于路由，但是在测试该库时面临的问题是，它无法找到并路由至我要引用的组件。 / p>

如果我在以下任何组件中将路径更改为''并在app Test中定义了路由，那么它将适用于该组件，但是在定义了路径的情况下 1）在库中测试模块文件

   const routes: Routes = [
      { path: 'view', component: ViewComponent },
      { path: 'apply', component: ApplyComponent },
    ];

    @NgModule({
    declarations: [ViewComponent,ApplyComponent],
    imports: [
       ReactiveFormsModule,
       CommonModule,
       RouterModule.forChild(routes)
     ],exports:[
        ViewComponent,ApplyComponent
     ]
    })
    export class TestModule { }

2）测试应用中的路由文件，该文件从模块导入库

   const routes: Routes = [
     {
       path: 'applyTest',
       children: [
         { path: 'apply', loadChildren: './app-test.module#AppTestModule' }
        ]
      },
      {
        path: 'viewTest',
        children: [
          { path: 'view', loadChildren: './app-test.module#AppTestModule' }
         ]
       }
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

这将被导入到app.module.ts中 3）测试应用中的AppTestModule

    import { NgModule } from '@angular/core';
    import {TestModule } from 'testLib';

    @NgModule({
      imports: [
        TestModule 
      ]
    })
    export class AppTestModule{ }

4）测试应用中的SideNavigationhtml

    <a  [routerLink]="['/applyTest' ]">Apply Test</a>       
    <a  [routerLink]="['/viewTest' ]">View Test</a>

当我尝试单击路由器链接时，没有加载任何内容，我希望根据单击来加载ViewComponent / ApplyComponent。

Answer 1

您是否在html中包含路由器出口标签？

使用路由在角度库中加载多个组件

1 个答案: