Angular 角度材质选项卡NavBar'；s墨水条未高亮显示带子对象的路线

大纲

我的简单角度SPA使用角度材质组件。My

应用程序组件

模板显示一个

mat选项卡导航栏

，其中包含一些链接，用于将功能组件放置在

路由器插座内

。其中一个组件（报告）是功能模块和

报告的一部分。组件

模板有自己的

mat选项卡导航栏

，形成一个子菜单。以下是菜单的图像：

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

如图中所示，我的问题是，当在主菜单中选择“报告”时，墨水条不会动画显示在选定选项卡下方，而是保持在最后选定的选项卡上

代码

以下是my

package.json中定义的角度相关性：

“@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布局”：“2.0.0-rc.1”，
“@angular/forms”：“^5.2.0”，
“@angular/http”：“^5.2.0”，
“@角度/材料”：“5.2.2”，
“@angular/platform浏览器”：“^5.2.0”，
“@angular/platform browser dynamic”：“^5.2.0”，
“@angular/platform server”：“^5.2.0”，
“@angular/router”：“^5.2.0”，

我的
app.组件
模板包括以下
mat选项卡导航栏
：


{{link.label}

app.component
代码如下：

从'@angular/core'导入{Component，OnInit}；
从“/core/interfaces”导入{INavLink}”；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.scss']
})
导出类AppComponent{
标题=‘应用程序’；
版本号：string=“”；
导航链接：INavLink[]=[
{标签：'Home'，路径：'/Home'}，
{标签：'数据项'，路径：'/Data Entry'}，
{标签：'Reports'，路径：'/Reports'}，
{标签：'活动'，路径：'/magnetics'}，
{标签：'Utilities'，路径：'/Utilities'}
];
恩戈尼尼特（）{
//设置版本号。
this.versionNumber='0.0.1'；
};
}

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

从'@angular/core'导入{NgModule}；
从'@angular/router'导入{Routes，RouterModule}；
从“./home/components/home.component”导入{HomeComponent}；
从“./data entry/components/data entry.component”导入{DataEntryComponent}；
从“./reports/components/reports.component”导入{ReportsComponent}；
从“./magnities/components/magnities.component”导入{magniticscomponent}；
从“./utilities/components/utilities.component”导入{UtilitiesComponent}；
施工许可：路线=[
{路径：''，组件：HomeComponent，路径匹配：'full'}，
{path:'home'，component:HomeComponent}，
{path:'data entry'，component:DataEntryComponent}，
{路径：'reports'，组件：ReportsComponent}，
{路径：“活动”，组件：活动组件}，
{路径：'utilities'，组件：UtilitiesComponent}
];
@NGD模块({
进口：[
RouterModule.forRoot(
批准，
{enableTracing:true}/在看了好几个小时之后，在发布问题之后，我就把它解决了

指定了my
应用组件
模板中的
mat选项卡导航栏
：

[routerLinkActiveOptions]="{exact: true}"

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

我希望这对其他人有帮助