根据 Angular 中的 RouterURL 更改样式 8

Question

我有一个名为 'NavigatorComponent' 的组件。我有我的“routerLink”。所有 url 都附加到不同的组件。现在的情况是我必须根据当前 url 更改 link 颜色。我是 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},
];

Answer 1

使用 routerLinkActive 指令。

此指令在 link 的路由变为活动状态时向元素添加 CSS class。

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

Demo

Answer 2

您可以使用 RouterLinkActive 将 CSS class 添加到您的活动 link, Exp :

<li><a [routerLinkActive]="['class1', 'class2'] [routerLink] = "'/your-plan'">Select Your Plan</a></li>

或者

<li><a routerLinkActive="class1 class2" [routerLink] = "'/your-plan'">Select Your Plan</a></li>

根据 Angular 中的 RouterURL 更改样式 8

Change style depending on RouterURL in Angular 8

angular-routing

angular-components

angular