根据Angular 8中的RouterURL更改样式

debugcn 发表于 Dev

用户名

我有一个名为“ NavigatorComponent”的组件。那里有我的“ routerLink ”。所有网址都附加到不同的组件。现在的情况是我必须根据当前的URL更改链接颜色。我是Angular的新手，所以我不知道该怎么做。任何帮助将不胜感激。以下是Navigator.html和app-routing.module.ts文件的代码片段。

<ul>
   <li><a class="active" [routerLink] = "'/welcome-information'">Welcome Information</a></li>
   <li><a class="disable" [routerLink] = "'/your-plan'">Select Your Plan</a></li>
   <li><a class="disable" [routerLink] = "'/your-data'">Confirm Your Data</a></li>
   <li><a class="disable" [routerLink] = "'/bank-draft'">Bank Draft</a></li>
   <li><a class="disable" [routerLink] = "'/your-choice'">Finalize Your Choice</a></li>
</ul>

const routes: Routes = [
  {path: 'welcome-information' , component: WelcomeInformationComponent},
  {path: 'your-plan' , component: YourPlanComponent},
  {path: 'your-data' , component: YourDataComponent},
  {path: 'bank-draft' , component: BankDraftComponent},
  {path: 'your-choice' , component: YourChoiceComponent},
];

阿德里塔·沙玛（Adrita Sharma）

使用routerLinkActive指令。

当链接的路由变为活动状态时，此伪指令将CSS类添加到元素。

<li><a  routerLinkActive="active" [routerLink] = "'/welcome-information'">Welcome Information</a></li>
<li><a  routerLinkActive="active"  class="disable" [routerLink] = "'/your-plan'">Select Your Plan</a></li>

演示版

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。