Angular Material TabNavBar 的 Ink-Bar 未突出显示带有子项的路线

Question

大纲

我的简单 Angular SPA 使用的是 Angular Material 组件。我的app.component 模板显示了一个mat-tab-nav-bar，其中有几个链接可以将功能组件放置在router-outlet 中。其中一个组件（报告）是功能模块的一部分，reports.component 模板有自己的mat-tab-nav-bar 形成一个子菜单。这是菜单的图片：

主选项卡的所有路由都正确显示了它们各自的组件，包括显示其自己的一组报告选项卡的报告组件。所有报告选项卡也正确显示了它们各自的组件。

如图所示，我的问题是，当在主菜单中选择报告时，墨水栏没有动画显示在所选选项卡下方，它仍保留在最后一个选定选项卡上。

代码

这是我的package.json 中定义的 Angular 依赖项：

"@angular/animations": "^5.2.0",
"@angular/cdk": "5.2.2",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/flex-layout": "2.0.0-rc.1",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/material": "5.2.2",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/platform-server": "^5.2.0",
"@angular/router": "^5.2.0",

我的app.component 模板包括以下mat-tab-nav-bar：

<nav id="tabNavBar" #tabNavBar mat-tab-nav-bar>
  <a mat-tab-link
     *ngFor="let link of navLinks"
     [routerLink]="link.path"
     routerLinkActive
     [routerLinkActiveOptions]="{exact: true}"
     #rla="routerLinkActive"
     [active]="rla.isActive"
     style="height: 64px;">
       {{ link.label }}
  </a>
</nav>

app.component代码如下：

import { Component, OnInit } from '@angular/core';
import { INavLink } from "./core/interfaces";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  title = 'app';
  versionNumber: string = "";
  navLinks: INavLink[] = [
    { label: 'Home', path: '/home' },
    { label: 'Data Entry', path: '/data-entry' },
    { label: 'Reports', path: '/reports' },
    { label: 'Campaigns', path: '/campaigns' },
    { label: 'Utilities', path: '/utilities' }
  ];

  ngOnInit() {

    // Set the version number.
    this.versionNumber = '0.0.1';

  };
}

我在app-routing.module.ts中定义了应用级路由代码：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/components/home.component';
import { DataEntryComponent } from './data-entry/components/data-entry.component';
import { ReportsComponent } from './reports/components/reports.component';
import { CampaignsComponent } from './campaigns/components/campaigns.component';
import { UtilitiesComponent } from './utilities/components/utilities.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'data-entry', component: DataEntryComponent },
  { path: 'reports', component: ReportsComponent },
  { path: 'campaigns', component: CampaignsComponent },
  { path: 'utilities', component: UtilitiesComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

如果我从reports.component 中删除子导航，包括router-outlet，Ink-Bar 会按预期在“报告”选项卡下进行动画处理。

这是我的reports.module.ts 代码：

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from '@angular/router';
import { CommonModule } from "@angular/common";

/* Angular Material */
import { MaterialModule } from '../core/material.module';

/* Components */
import { ReportsComponent } from './components/reports.component';
import { ReportsDesignChangesComponent } from './components/reports-design-changes.component';
import { ReportsEquipmentComponent } from './components/reports-equipment.component';
import { ReportsStationComponent } from './components/reports-station.component';

export const reportsRoutes: Routes = [
  {
    path: 'reports', component: ReportsComponent,
    children: [
      { path: '', redirectTo: 'design-changes', pathMatch: 'full' },
      { path: 'design-changes', component: ReportsDesignChangesComponent },
      { path: 'equipment', component: ReportsEquipmentComponent },
      { path: 'station', component: ReportsStationComponent }
    ]
  }
]

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(reportsRoutes),
    MaterialModule
  ],
  declarations: [
    ReportsComponent,
    ReportsDesignChangesComponent,
    ReportsEquipmentComponent,
    ReportsStationComponent
  ],
  exports: [RouterModule],
  entryComponents: [
    ReportsComponent,
    ReportsDesignChangesComponent,
    ReportsEquipmentComponent,
    ReportsStationComponent
  ]
})
export class ReportsModule {
}

我的reports.component.html 模板包括以下mat-tab-nav-bar：

  <nav id="reportsNavBar" mat-tab-nav-bar color="primary" style="background-color: hsla(230, 80%, 50%, 0.2);">
    <a mat-tab-link
       *ngFor="let link of reportNavLinks"
       [routerLink]="link.path"
       routerLinkActive
       [routerLinkActiveOptions]="{exact: true}"
       #rla="routerLinkActive"
       [active]="rla.isActive"
       style="height: 64px;">
      {{link.label}}
    </a>
  </nav>

reports.component.ts 代码很简单：

import { Component } from '@angular/core';
import { RouterLinkActive } from '@angular/router';
import { INavLink } from "../../core/interfaces";

@Component({
  templateUrl: './reports.component.html',
  styleUrls: ["./reports.component.scss"]
})
export class ReportsComponent {

  reportNavLinks: INavLink[] = [
    { label: 'Design Changes', path: 'design-changes' },
    { label: 'Station', path: 'station' },
    { label: 'Equipment', path: 'equipment' }
    ]
}

总结

可能是我的一个非常简单的错误，它阻止了 Ink-Bar 移动到“报告”选项卡下方，我只是看不到它。如果有人能提供一些建议来为我指明正确的方向，我将不胜感激。

Answer 1

在看了很多小时之后，在发布问题后我解决了！

在我的app.component 模板中指定了mat-tab-nav-bar：

[routerLinkActiveOptions]="{exact: true}"

当然，URL 不会完全是 http://localhost:5000/reports，因为子路由会在 URL 中添加额外的部分，例如 http://localhost:5000/reports/equipment。所以，我将routerLinkActiveOptions 的exact 设置为false，一切正常。

我希望这对其他人有帮助。