角2/4:如何在父级导航栏中显示子模块的所有导航条目？

Question

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

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

现在，团队已经改变了GUI设计。根级导航栏上有一个下拉菜单。指向所有功能页的链接都在此下拉菜单栏中组装。重构我的实现以适应这个新的下拉菜单栏的最佳方法是什么？(我现在必须将所有二级navi链接推到1级navi模板。app.component.html已更改为包含所有这些链接。但我也必须重构其他文件吗？那怎么做？)

角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>

​

当前的app-routing.module.ts看起来如下(sans进口)：

​

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>

​

相应的子路由配置如下所示(sans导入)：

​

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>

基本上就是这样。在我的情况下，其他类型记录文件不需要更改。但是如果有路由器守卫，也许就需要改变了。我不知道。我现在正在将路由器保护程序构建到迁移代码中。