Question

我有一个有5个模块的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路由器插座中渲染一样。

请告诉我任何可能的解决方案。

Answer 1

您需要在expo.io/@your-username/slug文件中指定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'，确保它只匹配{{1}的根目录}}）。

同样，/modulex会在/modulex/test testComponent内呈现ModuleXComponent。

面对Angular 5中路由路由器名称属性的问题

1 个答案: