Angular5子路由场景下如何通过路由观察者隐藏指定界面元素？

我来给你详细说说具体怎么实现这个需求，通过监听路由变化就能轻松控制按钮的显示隐藏：

1. 在组件类中添加路由监听逻辑 #

首先在MyObjectDetailComponent里注入路由相关服务，定义一个布尔变量控制按钮状态，再订阅路由变化事件：

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

@Component({
  selector: 'app-my-object-detail',
  templateUrl: './my-object-detail.component.html'
})
export class MyObjectDetailComponent implements OnInit, OnDestroy {
  // 控制按钮显示的开关，默认显示按钮
  showNewButton = true;
  // 存储路由订阅实例，防止内存泄漏
  private routeSubscription: Subscription;

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

  ngOnInit() {
    // 方式一：监听全局路由导航完成事件，判断当前子路由路径
    this.routeSubscription = this.router.events.subscribe(event => {
      // 只处理导航结束的事件
      if (event instanceof NavigationEnd) {
        // 获取当前激活的子路由路径
        const currentChildPath = this.activatedRoute.firstChild?.snapshot.url[0]?.path;
        // 子路由是'new'时隐藏按钮，否则显示
        this.showNewButton = currentChildPath !== 'new';
      }
    });

    // 方式二：直接监听当前组件的子路由变化（更精准高效）
    // this.routeSubscription = this.activatedRoute.firstChild?.url.subscribe(urlSegments => {
    //   const childPath = urlSegments[0]?.path;
    //   this.showNewButton = childPath !== 'new';
    // });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    if (this.routeSubscription) {
      this.routeSubscription.unsubscribe();
    }
  }
}

2. 修改模板绑定显示逻辑 #

在MyObjectDetailComponent的模板里，给按钮加上*ngIf指令绑定到我们定义的变量：

<button #new *ngIf="showNewButton">新建</button>
<router-outlet></router-outlet>

逻辑说明 #

• 当路由切换到my-object/:id/new时，子路由路径为new，showNewButton会被设为false，按钮自动隐藏；
• 当路由是sublist（包括默认重定向的情况）时，showNewButton为true，按钮正常显示；
• 两种监听方式选一种就行：方式一监听全局路由事件，适合需要响应全局路由变化的场景；方式二只监听当前组件的子路由变化，更高效精准；
• 记得在组件销毁时取消订阅，Angular 5里不做这一步容易出现内存泄漏问题。

内容的提问来源于stack exchange，提问作者tester.one