Angular 13特定路由模式下组件隐藏失效问题排查：商品详情页侧边栏无法隐藏

你遇到的问题根源在于：路由参数占位符:id并不会出现在实际的URL中。当你访问商品详情页时，浏览器地址栏的URL是类似/products/show/123这样的（123是具体的商品ID），而你在hasRoute方法中检查的是router.url.includes('products/show/:id')——这个字符串在实际URL里根本不存在，所以!hasRoute(...)始终为false，侧边栏就会一直显示。

下面给你几种可行的修复方案：

方案一：匹配路由前缀（最简单直接） #

修改hasRoute方法，改为检查URL是否以目标路由的前缀开头：

hasRoute(routePrefix: string) {
  // 确保前缀前有斜杠，避免误匹配到类似`/products/showcase`的路由
  return this.router.url.startsWith(`/${routePrefix}`);
}

然后在模板中调用时，去掉占位符:id：

<div *ngIf="!hasRoute('products/show')" class="col-sm-6 col-md-4 col-lg-3">
  <app-sidebar class="app-sidebar"></app-sidebar>
</div>

方案二：使用Angular Router的isActive方法（更规范的路由匹配） #

Angular的Router提供了专门的isActive方法来判断路由是否激活，支持精确匹配或前缀匹配，比手动字符串判断更可靠：

hasRoute(routePath: string) {
  return this.router.isActive(routePath, {
    paths: 'prefix', // 前缀匹配，会匹配所有以该路径开头的路由
    queryParams: 'ignored',
    fragment: 'ignored',
    matrixParams: 'ignored'
  });
}

模板中同样传入不带占位符的路径：

<div *ngIf="!hasRoute('/products/show')" class="col-sm-6 col-md-4 col-lg-3">
  <app-sidebar class="app-sidebar"></app-sidebar>
</div>

如果需要精确匹配某个无参数的路由，可以把paths改为'exact'。

方案三：直接在模板中判断（适合简单场景） #

如果不想修改组件方法，也可以直接在模板中写判断逻辑，不过需要先把组件里的router改为公共属性：

constructor(public router: Router) {} // 将private改为public，让模板能访问

然后模板里直接判断：

<div *ngIf="!(router.url.startsWith('/products/show/'))" class="col-sm-6 col-md-4 col-lg-3">
  <app-sidebar class="app-sidebar"></app-sidebar>
</div>

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