Angular 5如何在app.component.ts中获取激活路由并动态显隐导航栏

没问题！在Angular 5里，你完全可以在app.component.ts中获取当前激活的路由，而且这是实现「特定路由隐藏导航栏/顶部栏」需求的常用方案。我给你详细拆解几种可行的实现方式，包括路由监听方案，还有其他更灵活的思路：

一、直接在app.component.ts中监听当前路由变化 #

这种方式最直接，通过监听路由导航事件，实时获取当前激活的路由，再根据路由判断是否隐藏导航栏/顶部栏。

步骤1：导入所需依赖 #

首先在app.component.ts中导入路由相关的模块：

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

步骤2：注入路由服务并监听导航事件 #

在组件的构造函数中注入Router和ActivatedRoute，然后在ngOnInit里监听NavigationEnd事件（这个事件会在路由导航完成后触发，确保拿到的是最终的路由状态）：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  hideNavigation = false; // 控制导航栏/顶部栏的显示隐藏

  constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.router.events.pipe(
      // 只监听导航结束的事件
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 处理嵌套路由：循环找到最底层的激活路由（如果是嵌套路由的话）
      let currentRoute = this.activatedRoute.root;
      while (currentRoute.firstChild) {
        currentRoute = currentRoute.firstChild;
      }

      // 方式1：根据路由路径判断
      const currentPath = currentRoute.snapshot.url.join('/');
      // 把需要隐藏导航栏的路由列在这里，比如登录、注册页
      this.hideNavigation = ['login', 'register', 'forgot-password'].includes(currentPath);

      // 方式2：更优雅的方式——用路由配置的data属性（推荐）
      // 先在路由配置里给需要隐藏的路由加data：{ path: 'login', component: LoginComponent, data: { hideLayout: true } }
      // 然后这里获取：
      // this.hideNavigation = currentRoute.snapshot.data['hideLayout'] || false;
    });
  }
}

步骤3：在模板中控制显示 #

最后在app.component.html里用*ngIf绑定hideNavigation变量，控制导航栏和顶部栏的显示：

<!-- 顶部栏：只有当hideNavigation为false时显示 -->
<app-topbar *ngIf="!hideNavigation"></app-topbar>
<!-- 导航栏：同理 -->
<app-navbar *ngIf="!hideNavigation"></app-navbar>
<!-- 路由出口 -->
<router-outlet></router-outlet>

这样切换到其他路由时，NavigationEnd事件会再次触发，hideNavigation会自动更新为false，导航栏和顶部栏就会重新显示，完美实现响应式效果。

二、其他替代解决方案 #

如果觉得直接监听路由不够灵活，还有两种常用的思路：

1. 利用路由守卫+全局状态（适合复杂权限场景） #

如果你的隐藏逻辑还和用户权限挂钩，可以用路由守卫（比如CanActivate）来判断，同时结合一个全局服务来管理布局状态：

• 首先创建一个LayoutService来存储布局状态；
• 在路由守卫中，根据路由和权限设置hideLayout状态；
• 最后在app.component.ts中订阅这个服务的状态变化，控制显示。

不过这种方式相对复杂，适合有额外权限判断的场景，单纯隐藏布局的话，前面的路由监听方案足够用了。

2. 在目标组件中主动控制布局状态 #

如果某些页面的隐藏逻辑不是由路由直接决定，而是组件内部的逻辑，可以创建一个全局的布局服务，在需要隐藏的组件中主动调用服务的方法设置隐藏，组件销毁时再恢复：

第一步：创建布局服务

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class LayoutService {
  // 用BehaviorSubject保存状态，确保订阅者能拿到初始值
  private hideLayout$ = new BehaviorSubject<boolean>(false);
  currentLayoutState$ = this.hideLayout$.asObservable();

  setHideLayout(hide: boolean) {
    this.hideLayout$.next(hide);
  }
}

第二步：在需要隐藏的组件中使用

比如在LoginComponent中：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { LayoutService } from '../services/layout.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit, OnDestroy {
  constructor(private layoutService: LayoutService) {}

  ngOnInit() {
    // 进入登录页时隐藏布局
    this.layoutService.setHideLayout(true);
  }

  ngOnDestroy() {
    // 离开登录页时恢复布局显示
    this.layoutService.setHideLayout(false);
  }
}

第三步：在app.component.ts中订阅状态

import { Component, OnInit } from '@angular/core';
import { LayoutService } from './services/layout.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  hideNavigation = false;

  constructor(private layoutService: LayoutService) {}

  ngOnInit() {
    this.layoutService.currentLayoutState$.subscribe(hide => {
      this.hideNavigation = hide;
    });
  }
}

这种方式的好处是布局控制逻辑分散到各个组件中，适合复杂的业务场景。

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