Angular动态路由场景下导航栏与页脚组件隐藏异常问题

这个问题我之前也碰到过！核心原因是你直接拿实际的URL和路由模板字符串（比如/admin/category/:categoryId）对比，而动态路由的实际URL是带具体ID的（比如/admin/category/123），两者完全不相等，所以*ngIf的判断失效了。下面给你几个靠谱的解决办法，按推荐程度排序：

方法一：用路由data属性标记（最灵活、扩展性强） #

这种方式是给需要隐藏布局的路由加个自定义标记，以后新增Admin路由时，只需要在路由配置里加标记就行，不用改Main组件的判断逻辑。

步骤1：修改路由配置 #

在你的路由配置文件（比如app-routing.module.ts）里，给所有Admin相关路由（包括动态路由）添加data: { hideLayout: true }：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// 导入你的Admin组件
import { AdminLoginComponent } from './admin/login/login.component';
import { AdminDashboardComponent } from './admin/dashboard/dashboard.component';
import { AdminCategoryComponent } from './admin/category/category.component';

const routes: Routes = [
  // 非Admin路由保持不变
  {
    path: 'admin',
    children: [
      { path: 'login', component: AdminLoginComponent, data: { hideLayout: true } },
      { path: 'sign-up', component: AdminSignUpComponent, data: { hideLayout: true } },
      { path: 'dashboard', component: AdminDashboardComponent, data: { hideLayout: true } },
      { path: 'category/:categoryId', component: AdminCategoryComponent, data: { hideLayout: true } },
      { path: 'user/:userId', component: AdminUserComponent, data: { hideLayout: true } },
      // 其他Admin路由同理添加
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

步骤2：修改Main组件逻辑 #

在Main.ts里监听路由，获取当前路由的data属性，用标记判断是否隐藏布局：

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

export class MainComponent {
  public hideLayout = false;

  constructor(private router: Router, private activatedRoute: ActivatedRoute) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      // 递归获取当前激活的子路由（因为Admin是嵌套路由）
      map(() => {
        let currentRoute = this.activatedRoute;
        while (currentRoute.firstChild) {
          currentRoute = currentRoute.firstChild;
        }
        return currentRoute.snapshot.data;
      })
    ).subscribe(data => {
      // 根据路由标记设置布局显示状态
      this.hideLayout = data['hideLayout'] || false;
    });
  }
}

步骤3：简化Main.html的判断 #

现在模板里只需要判断hideLayout变量即可：

<div class="main__container">
  <app-navbar *ngIf="!hideLayout"></app-navbar>
  <app-footer *ngIf="!hideLayout"></app-footer>
  <!-- 路由出口 -->
  <router-outlet></router-outlet>
</div>

方法二：用Router.isActive()匹配路由模板 #

如果不想改路由配置，可以用Angular Router的isActive()方法，设置exact: false来忽略路由参数，匹配模板路径：

修改Main组件逻辑 #

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

export class MainComponent {
  public shouldHideLayout = false;

  constructor(private router: Router) {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        // 第二个参数设为false，忽略路由参数匹配模板
        this.shouldHideLayout = 
          this.router.isActive('/admin/login', false) ||
          this.router.isActive('/admin/sign-up', false) ||
          this.router.isActive('/admin/dashboard', false) ||
          this.router.isActive('/admin/category/:categoryId', false) ||
          this.router.isActive('/admin/user/:userId', false);
      }
    });
  }
}

模板判断 #

和方法一一样，模板里用*ngIf="!shouldHideLayout"控制navbar和footer的显示。

方法三：正则表达式匹配Admin路径（最简洁） #

如果所有以/admin/开头的路由都需要隐藏布局，可以用正则直接匹配URL：

修改Main组件逻辑 #

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

export class MainComponent {
  public shouldHideLayout = false;
  // 匹配/admin开头的所有路由（包括/admin本身）
  private adminRouteRegex = /^\/admin(\/.*)?$/;

  constructor(private router: Router) {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.shouldHideLayout = this.adminRouteRegex.test(event.url);
      }
    });
  }
}

模板判断 #

同样用*ngIf="!shouldHideLayout"控制显示。

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