Angular 5中如何仅在路由为'/admin'时修改verticalNavType属性

你遇到的问题其实是因为直接判断router.url的方式，在路由有子路径时，可能因为父组件仍处于激活状态（如果你的路由配置里/admin是父路由，子路由如/admin/company_profile会复用父组件），或者你需要的是精确匹配路由路径而非简单的字符串匹配（比如避免带斜杠的/admin/或者带查询参数的情况）。这里给你几个可靠的解决方案：

方案1：使用Router的isActive方法精确匹配 #

Angular的Router提供了isActive方法，第二个参数传true就能实现严格精确匹配，不会匹配任何子路径：

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

@Component({
  // 你的组件配置
})
export class YourComponent implements OnInit, OnDestroy {
  verticalNavType: string = '默认值';
  private routerSub: Subscription;

  constructor(private router: Router) {}

  ngOnInit() {
    // 监听路由导航完成事件，确保路由状态稳定后再判断
    this.routerSub = this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // 第二个参数true表示精确匹配路由
        if (this.router.isActive('/admin', true)) {
          this.verticalNavType = 'offcanvas';
        } else {
          // 其他路由时恢复默认值
          this.verticalNavType = '默认值';
        }
      }
    });
  }

  ngOnDestroy() {
    // 记得销毁订阅，避免内存泄漏
    if (this.routerSub) {
      this.routerSub.unsubscribe();
    }
  }
}

方案2：直接匹配路由快照的完整路径 #

如果你想直接用路由快照判断，可以获取激活路由的完整路径字符串做严格对比：

ngOnInit() {
  this.routerSub = this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      // 获取当前激活路由的完整路径字符串
      const currentPath = this.router.routerState.snapshot.url;
      // 严格等于'/admin'才触发修改
      if (currentPath === '/admin') {
        this.verticalNavType = 'offcanvas';
      } else {
        this.verticalNavType = '默认值';
      }
    }
  });
}

为什么原来的代码会出问题？ #

如果你的路由配置中/admin是父路由，子路由（如/admin/company_profile）会加载父组件，这时候如果你的判断逻辑写在组件的构造函数或ngOnInit里，当首次进入子路由时，父组件的初始化逻辑会执行，但此时router.url其实是/admin/company_profile，按道理不会触发判断——除非你的代码是写在某个会重复执行的钩子（比如ngDoCheck）里，或者路由配置有特殊情况。而用isActive方法的精确匹配，能彻底避免这类边界问题。

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