根据Angular 8中的RouterURL更改样式

Posted 2023-03-13

【中文标题】根据Angular 8中的RouterURL更改样式

【英文标题】：Change style depending on RouterURL in Angular 8

【发布时间】：2020-06-04 10:05:35

【问题描述】：

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

<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,
];

【参考方案1】：

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

Demo

【讨论】：

谢谢。阿德里塔。这是一个真正的帮助。但是，我想知道访问链接是否也有任何指令？以及如何使用禁用类禁用其他链接？

@PiyaliGhosh 我不知道访问链接指令，你必须检查。对于禁用的链接，您可以使用class="disable"。我添加了一个演示。检查 app.component.css 以及

【参考方案2】：

您可以使用RouterLinkActive 将 CSS 类添加到您的活动链接中，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>