Angular 5多路由下隐藏指定组件问题求助

我一眼就看出问题所在啦——你误用了String.includes()方法，它根本不支持同时传入多个搜索值！

问题根源 #

String.prototype.includes()的语法是：str.includes(searchString[, position])，它只接受单个搜索字符串和可选的起始位置参数。你写的_router.url.includes('account', 'admin', 'app')里，后面的'admin'和'app'会被直接忽略，所以只有当URL包含'account'时才会触发隐藏逻辑，另外两个路由场景自然没效果。

快速修复方案 #

我们可以把需要隐藏组件的路由关键词放到一个数组里，然后用数组的some()方法来检查当前URL是否匹配任意一个关键词，这样就能覆盖多路由场景了：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
    <app-header *ngIf="!shouldHideHeaderFooter"></app-header>
    <router-outlet></router-outlet>
    <app-footer *ngIf="!shouldHideHeaderFooter"></app-footer>
  `
})
export class AppComponent {
  // 定义需要隐藏头部/底部的路由关键词列表
  private hiddenRouteKeywords = ['account', 'admin', 'app'];

  constructor(public _router: Router) {}

  // 计算属性，统一处理隐藏判断逻辑
  get shouldHideHeaderFooter(): boolean {
    return this.hiddenRouteKeywords.some(keyword => 
      this._router.url.includes(keyword)
    );
  }
}

这个方案把判断逻辑抽成了计算属性，不仅修复了多路由的问题，还让模板代码更简洁，后续要添加新的隐藏路由，直接修改hiddenRouteKeywords数组即可，维护起来很方便。

进阶优雅方案（推荐） #

直接通过URL字符串判断可能存在风险（比如路由参数里碰巧包含这些关键词，或者嵌套路由结构复杂时），更可靠的方式是利用Angular路由的data属性来配置路由的隐藏规则：

1. 首先在路由配置中给需要隐藏组件的路由添加自定义数据：

const routes: Routes = [
  { path: 'account', component: AccountComponent, data: { hideHeaderFooter: true } },
  { path: 'admin', component: AdminComponent, data: { hideHeaderFooter: true } },
  { path: 'app', component: AppContentComponent, data: { hideHeaderFooter: true } },
  // 其他不需要隐藏的路由无需添加该配置
  { path: '', component: HomeComponent },
];

2. 然后在AppComponent中监听路由变化，读取当前路由的配置数据：

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

@Component({
  selector: 'app-root',
  template: `
    <app-header *ngIf="!hideHeaderFooter"></app-header>
    <router-outlet></router-outlet>
    <app-footer *ngIf="!hideHeaderFooter"></app-footer>
  `
})
export class AppComponent implements OnInit {
  hideHeaderFooter = false;

  constructor(private router: Router) {}

  ngOnInit(): void {
    this.router.events.pipe(
      // 只监听路由完成的事件
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 获取当前激活的路由节点
      const currentActiveRoute = this.router.routerState.root.firstChild;
      // 读取路由配置中的隐藏标记
      this.hideHeaderFooter = currentActiveRoute?.data?.['hideHeaderFooter'] || false;
    });
  }
}

这种方案完全基于Angular路由的原生能力，逻辑清晰，避免了字符串匹配的潜在问题，更符合Angular的最佳实践哦！

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