在 Angular 中设置活动路由器链接的样式

在 Angular 中，当我们在应用程序中导航到不同的路由时，我们需要有一种方法来标记当前活动的路由链接以突出显示导航。本文将介绍如何在 Angular 中设置活动路由器链接的样式。

使用 routerLinkActive 指令

在 Angular 中，我们可以使用 routerLinkActive 指令来为当前活动的路由链接添加样式。该指令可以应用于任何具有 routerLink 指令的 HTML 元素上。

<a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>

routerLinkActive 属性指定了应用于当前活动路由链接的类名。在上面的示例中，我们指定了 active 类。当当前路由链接为 /dashboard 时，该链接将应用该类。

我们还可以使用 routerLinkActiveOptions 属性指定其他选项。例如，我们可以指示 routerLinkActive 等待路由链接的完全匹配，而不仅仅是前缀匹配。

<a routerLink="/dashboard/users" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Users</a>

在上面的示例中，我们指定了 exact 选项，以便等待路由链接的完全匹配。这将确保只有在链接为 /dashboard/users 时才应用 active 类。

使用 CSS 样式

除了使用 routerLinkActive 指令，我们还可以使用 CSS 样式为当前活动的路由链接添加样式。

我们可以使用 routerLink 指令来指定链接的路由路径，并使用 CSS 类为该链接添加样式。例如：

<a routerLink="/dashboard" class="nav-link">Dashboard</a>
<a routerLink="/dashboard/users" class="nav-link">Users</a>

使用 CSS，我们可以为当前活动的路由链接指定其独特的样式。我们可以使用 router-link-active 类来选择当前活动的路由链接。

.nav-link {
  color: #ccc;
  text-decoration: none;
}
.nav-link.router-link-active {
  color: #fff;
  background-color: #007bff;
}

在上面的示例中，我们为 nav-link 类指定了灰色文本颜色和无下划线文本装饰。我们还使用 .router-link-active 类为当前活动的路由链接指定了白色文本颜色和蓝色背景颜色。

使用路由事件

如果我们想在应用程序中自定义路由逻辑，我们可以使用 Router 类提供的路由事件。当路由发生变化时，我们可以监听这些事件并在需要时执行自定义逻辑。

以下示例演示如何使用 Router 类中的 events 属性来订阅路由事件：

import { Component, OnInit } from "@angular/core";
import { Router, NavigationEnd } from "@angular/router";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  activePath: string;
  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.activePath = event.url;
      }
    });
  }
}

在上面的示例中，我们订阅了路由事件，并在路由路径变化时，使用 event.url 属性更新了 activePath 变量。然后，我们可以在 HTML 模板中使用该变量来应用活动路由链接的样式。

<a routerLink="/dashboard" [class.active]="activePath === '/dashboard'">Dashboard</a>
<a routerLink="/dashboard/users" [class.active]="activePath === '/dashboard/users'">Users</a>

在上面的示例中，我们使用 [class.active] 绑定语法，将 active 类应用于当前路径为路由路径时。

结论

在 Angular 中设置活动路由链接的样式是一个非常常见的需求。本文介绍了使用 routerLinkActive 指令、CSS 样式和路由事件来实现这一需求的不同方法。无论您选择哪种方法，您都可以为用户提供更好的导航体验。