Angular 5如何判断当前激活组件？实现动态设置按钮内容

嘿，这个需求在Angular里其实有挺成熟的实现思路，你考虑的路由判断方向是对的，不过还有更优雅的方式，我给你梳理几种常用方案：

1. 利用路由事件+ActivatedRoute（推荐，适配复杂路由场景） #

这种方式完全基于Angular的路由API，不用直接解析URL字符串，可靠性更高，能轻松应对子路由、路由参数等复杂情况。

实现代码 #

在设置组件的TS文件中监听路由导航结束事件，获取当前激活路由的路径：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { filter, map } from 'rxjs/operators';

@Component({
  selector: 'app-settings-button',
  templateUrl: './settings-button.component.html'
})
export class SettingsButtonComponent implements OnInit {
  currentRoutePath: string = '';

  constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      map(() => this.activatedRoute)
    ).subscribe(route => {
      // 递归获取最底层的子路由路径
      while (route.firstChild) {
        route = route.firstChild;
      }
      this.currentRoutePath = route.snapshot.url.join('/');
    });
  }
}

模板中通过*ngIf动态切换按钮内容：

<button class="settings-btn">
  <span *ngIf="currentRoutePath === 'dashboard'">仪表盘设置</span>
  <span *ngIf="currentRoutePath === 'profile'">个人资料设置</span>
  <span *ngIf="currentRoutePath === 'notifications'">通知设置</span>
</button>

2. 路由自定义数据（最易维护，适合多路由场景） #

把按钮的动态内容直接配置在路由规则里，通过ActivatedRoute读取路由数据，不用在模板里写一堆*ngIf，维护起来更省心。

实现代码 #

先在路由配置中添加自定义数据：

const routes: Routes = [
  { 
    path: 'dashboard', 
    component: DashboardComponent, 
    data: { settingsBtnText: '仪表盘设置' } 
  },
  { 
    path: 'profile', 
    component: ProfileComponent, 
    data: { settingsBtnText: '个人资料设置' } 
  },
  { 
    path: 'notifications', 
    component: NotificationsComponent, 
    data: { settingsBtnText: '通知设置' } 
  }
];

然后在设置组件中监听路由数据变化：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-settings-button',
  templateUrl: './settings-button.component.html'
})
export class SettingsButtonComponent implements OnInit {
  settingsBtnText: string = '默认设置';

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit(): void {
    this.activatedRoute.data.subscribe(data => {
      this.settingsBtnText = data['settingsBtnText'] || this.settingsBtnText;
    });
  }
}

模板就非常简洁了：

<button class="settings-btn">{{ settingsBtnText }}</button>

3. routerLinkActive判断（快速实现，适合简单场景） #

如果你只是简单的单级路由场景，可以利用Angular内置的routerLinkActive指令，通过模板变量获取当前路由的激活状态，不用写TS逻辑。

实现代码 #

<button class="settings-btn">
  <span *ngIf="dashboardLink.active">仪表盘设置</span>
  <span *ngIf="profileLink.active">个人资料设置</span>
  <span *ngIf="notificationsLink.active">通知设置</span>
</button>

<!-- 隐藏路由链接，仅用来判断激活状态 -->
<a routerLink="/dashboard" routerLinkActive #dashboardLink="routerLinkActive" style="display: none;"></a>
<a routerLink="/profile" routerLinkActive #profileLink="routerLinkActive" style="display: none;"></a>
<a routerLink="/notifications" routerLinkActive #notificationsLink="routerLinkActive" style="display: none;"></a>

避坑提醒 #

你提到的直接读取URL的方式确实不推荐，因为URL可能包含路由参数、哈希值，或者项目后期做了路由重写，这种方式容错率极低，很容易出问题。

内容的提问来源于stack exchange，提问作者Goku