Angular中ngIf匹配带动态数字ID的路由问题求助

你遇到的核心问题是：router.url返回的是实际访问的具体路由路径（比如/2、/35），而你直接拿它和路由配置里的占位符/:id做字符串对比，两者自然不会相等，导致*ngIf无法触发。另外还要注意，只在constructor里获取一次router.url的话，路由切换后这个变量不会自动更新，也会让后续的判断失效。下面给你两种可行的解决方案：

方案一：用正则表达式匹配路径格式 #

这种方法直接判断当前URL是否符合/后跟数字的格式，不需要依赖路由配置，适合简单场景：

1. 在组件里添加判断方法，并订阅路由变化更新URL：

import { Router, NavigationEnd } from '@angular/router';

export class YourComponent {
  router: string;

  constructor(private _router: Router) {
    // 订阅路由事件，确保路由切换时同步更新router变量
    this._router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.router = event.url;
      }
    });
  }

  // 判断是否为商品详情路由（/后跟数字）
  isItemInfoRoute(): boolean {
    // 正则规则：以/开头，后面跟一个或多个数字，到结尾
    return /^\/\d+$/.test(this.router);
  }
}

2. 在模板中调用这个方法：

<app-main-menu *ngIf="router == '/'"></app-main-menu>
<app-item-list *ngIf="router == '/list'"></app-item-list>
<app-item-info *ngIf="isItemInfoRoute()"></app-item-info>

方案二：通过ActivatedRoute匹配路由配置 #

如果你的路由配置里明确把/:id定义为商品详情的路由路径，这种方法更可靠，不会因为URL格式变化而失效：

1. 注入ActivatedRoute并订阅路由变化：

import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';

export class YourComponent {
  router: string;

  constructor(private _router: Router, private activatedRoute: ActivatedRoute) {
    this._router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.router = event.url;
      }
    });
  }

  // 判断当前路由是否匹配配置的/:id路径
  isItemInfoRoute(): boolean {
    // 获取当前激活路由的配置路径
    return this.activatedRoute.routeConfig?.path === ':id';
  }
}

2. 模板中的调用和方案一一致：

<app-item-info *ngIf="isItemInfoRoute()"></app-item-info>

注意事项 #

• 必须订阅NavigationEnd事件来更新router变量，否则路由切换后，组件里的router还是初始加载时的值，判断会出错。
• 如果/:id是嵌套路由，可能需要通过activatedRoute.parent来获取父路由的配置，根据你的实际路由结构调整即可。

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