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 { }

如果我从我的router-outlet中移除子导航，包括reports.component，则“墨水栏”会在“报告”标签下按预期进行动画处理。

这是我的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移动到Reports选项卡下面，我无法看到它。如果有人可以提供一些建议，指出我正确的方向，我将非常感激。

Answer 1

经过多个小时的研究，在发布问题之后，我就把它解决了！

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

[routerLinkActiveOptions]="{exact: true}"

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

我希望这有助于其他人。

角度材料TabNavBar的墨水条没有突出显示儿童路线

1 个答案: