javascript - Angular 5中的路由路由器名称属性面临的问题

我有一个有3个模块的angular 5应用程序。三个模块的结构如下：
我有一个父模块appModule，appModule有两个模块子模块。让我称它们为modulex和moduley。

我在appmodule中有一个路由文件，可以路由到modulex和moduley路由文件。

但是现在我想在modulex中有另一个路由模块。因此，它仅更改页面部分的内容。

我知道它有点难以理解，请提出问题以更清楚。下面是我的代码：

appmodule.routing：

const routes: Routes = [
   { path: 'modulex', loadChildren: 'app/modules/modulex.module#modulex'},
   { path: 'moduley', loadChildren: 'app/modules/moduley.module#moduley' }
];

还有我的app.component.html文件：

<router-outlet></router-outlet>

modulex.routing文件：

    const modulexRoutes: Routes = [
    {path: '', component: ModulexComponent},
    {path: 'test', component: testComponent,
        children:[
            {path: '', component: testDetailComponent,outlet: 'dashboard'}
        ]
    }
];

modulex.component.html：

<div id="wrapper">
  <app-header></app-header>
  <div class="container">
      <router-outlet name="dashboard"></router-outlet>
  </div>
  <app-footer></app-footer>
</div>

我的要求是，如果我访问modulex / test，它应该在<router-outlet name="dashboard"></router-outlet>中呈现。但是像现在一样，它正在app.component.html路由器出口中呈现。

请让我知道任何可能的解决方案。

最佳答案

您需要在ModuleXComponent文件中指定modulex.routing并将所有子路由指定为子路径：

const modulexRoutes: Routes = [
    {
        path: '', component: ModuleXComponent, children: [
            { path: '', pathMatch: 'full', component: sampleComponent },
            { path: 'test', component: testComponent, outlet: 'dashboard' }
        ]
    }
];

这样可确保首先为ModuleXComponent下的所有路由呈现/modulex。

路径/modulex将在sampleComponent的ModuleXComponent内渲染router-outlet（pathMatch: 'full'确保仅与/modulex的根匹配）。

同样，/modulex/test将在testComponent的ModuleXComponent内渲染router-outlet。