Angular中根据当前路由组件动态修改导航栏文本

嘿，我来帮你搞定这个导航栏文本切换的问题！其实不用费劲去获取当前组件名称，Angular的路由模块已经给我们提供了更直接的方式——监听路由变化就可以啦，而且比判断组件名称更稳定可靠。

核心思路 #

我们可以通过订阅Router的导航事件，在路由切换完成后，根据当前的路由路径来设置对应的文本内容，完全不需要用冗余的*ngIf来判断组件状态。

修改后的完整代码 #

1. AppComponent TS代码 #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  myString: string = '';

  constructor(private router: Router) {}

  ngOnInit(): void {
    // 监听路由导航结束事件（过滤掉其他无关的路由事件）
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      // 根据最终路由路径设置对应文本
      this.updateNavText(event.urlAfterRedirects);
    });

    // 页面首次加载时初始化文本，避免为空
    this.updateNavText(this.router.url);
  }

  private updateNavText(currentUrl: string): void {
    switch(currentUrl) {
      case '/home':
        this.myString = 'Here, you can see a list';
        break;
      case '/contact':
        this.myString = 'Here you can send a mail';
        break;
      default:
        this.myString = ''; // 其他路由的默认文本，可根据需求修改
    }
  }
}

2. AppComponent HTML代码 #

我们可以简化原来的多个span，直接绑定myString变量即可：

<nav class="navbar navbar-expand-md">
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link item-navbar" routerLink="/home"> Home </a>
      </li>
      <li class="nav-item">
        <a class="nav-link item-navbar" routerLink="/contact"> Contact </a>
      </li>
      <li>
        <span>{{ myString }}</span>
      </li>
    </ul>
  </div>
</nav>

关键细节说明 #

• 监听NavigationEnd事件：路由切换过程中会触发多个事件（如NavigationStart、RoutesRecognized等），我们只需要在导航完全结束后更新文本，所以用filter过滤出NavigationEnd事件。
• 使用urlAfterRedirects：如果你的路由配置了重定向规则，url会显示原始路径，而urlAfterRedirects会显示最终跳转后的路径，更准确。
• 初始化文本：页面首次加载时不会触发导航事件，所以需要手动调用一次updateNavText来设置初始文本。

为什么不推荐获取组件名称？ #

虽然可以通过ActivatedRoute的firstChild.component获取当前激活的组件，但这种方式有两个缺点：

1. 组件名称在生产环境可能会被代码压缩工具混淆，导致判断失效；
2. 需要处理异步加载组件的情况，逻辑更复杂。

相比之下，直接根据路由路径判断是更简单、更稳定的方案。

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