Angular2/4：如何在父级导航栏中显示所有子模块的导航入口？

Question

在我项目的 UI 设计的第一个版本中，有两个级别的导航。根级，只有4links：特征组A、B、C、D。每个特征组都有自己的特征：A1、A2...B1、B2....D1、D2。当用户在应用程序根页面上单击 link "A" 时，A 组的所有功能将显示在子导航栏上。

我是这样实现应用程序的：创建了 4 个功能模块 A、B、C 和 D。每个模块都有自己的路由配置（例如：文件夹 A 下的 a-routing.module.ts）。二级导航栏写在每个功能模块的组件模板中，例如：a.component.html。一切都很好。

现在团队已经改变了GUI的设计。根级导航栏上有一个下拉菜单。所有功能页面的链接都集中在这个下拉菜单栏中。重构我的实现以适应这个新的下拉菜单栏的最佳方法是什么？（我现在必须将所有 2 级导航 link 推送到 1 级导航模板。app.component.html 已更改为包含所有这些 link。但是我必须也重构其他文件？如何重构？）

Angular 2 对我来说比较新，我还在学习，非常感谢您的帮助。

当前 app.component.html 看起来像这样：

<h1>My App</h1>
    <nav>
      <a routerLink="dashboard" routerLinkActive="active" >Dashboard</a>
      <a routerLink="servicecatalog" routerLinkActive="active">Service Catalog</a>
      <a routerLink="administration" routerLinkActive="active" >Administration</a>
      <a routerLink="usermenu" routerLinkActive="active" >Profile</a>
    </nav>    
<router-outlet></router-outlet>

当前应用-routing.module.ts 看起来像这样（没有导入）：

const routes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  declarations: [ PageNotFoundComponent ],
  exports: [ RouterModule ]
})
    
    
export class AppRoutingModule {}

子模块之一的组件模板如下所示：

<ul>
 <li><a routerLink="dashboard" routerLinkActive="active">Dashboard</a></li>
 <li><a routerLink="service-status" routerLinkActive="active">Service Status</a></li>
 <li><a routerLink="service-usage" routerLinkActive="active">Service
   Usage</a></li>
 <li><a routerLink="system-status" routerLinkActive="active">System
   Status</a></li>
 <li *ngFor="let item of externalHooks">
 <a [routerLink]="['/dashboard/binded-ui', item.uri]" routerLinkActive="active">{{item.caption}}</a></li>
</ul>

<router-outlet></router-outlet>

相应的子路由配置如下所示（无导入）：

const monitoringRoutes: Routes = [
    {
        path: 'dashboard',
        component: MonitoringComponent,
        children: [
            { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
            { path: 'dashboard', component: DashboardComponent },
            { path: 'service-status', component: ServiceStatusComponent },
            { path: 'service-usage', component: ServiceUsageComponent },
            { path: 'system-status', component: SystemStatusComponent },
            { path: 'binded-ui/:uri', component: UIBindingComponent }
        ]
    }   
];

@NgModule({
  imports: [ RouterModule.forChild(monitoringRoutes) ],
  exports: [ RouterModule ]
})
export class MonitoringRoutingModule {}

Answer 1

我刚刚试过了。它相对简单。基本上我只需要将模块 html 中的条目移动到根 html，并对 routerLink 进行一些细微的更改。例如，这一行：

<li><a routerLink="service-status" routerLinkActive="active">Service Status</a></li>

移动到app.component.html时，改为

<li><a routerLink="/dashboard/service-status" routerLinkActive="active">Service Status</a></li>

基本上就是这样。在我的情况下，其他打字稿文件不需要更改。但是，如果有一些路由器防护装置，则可能需要进行更改。我不知道。我现在正在将路由器防护构建到迁移的代码中。

Angular2/4：如何在父级导航栏中显示所有子模块的导航入口？

Angular 2/4: How to show all navigation entries of children modules in the parent level navigation bar?

angular2-template

angular2-routing

angular