Angular6+RxJS6下如何基于ActivatedRoute实现路由变化时的显隐操作？

嘿，我来帮你搞定这个需求！你已经用RxJS 6的新语法拿到了路由URL的Observable，接下来只需要通过订阅这个流来监听路由变化，再结合模板的*ngIf就能轻松控制内容的显示和隐藏啦。下面分步骤给你讲清楚：

方法一：手动订阅（适合需要额外逻辑处理的场景） #

首先在组件里定义一个布尔变量用来控制显示，然后订阅路由URL的变化，根据当前路由路径更新变量，最后别忘了在组件销毁时取消订阅避免内存泄漏：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  // 控制内容显示的变量
  showTargetContent = false;
  // 保存订阅实例，用于销毁时取消
  private routeSub!: Subscription;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 订阅路由URL变化
    this.routeSub = this.route.url.pipe(
      // 把路由段拼接成完整路径，比如 "/dashboard/user"
      map(segments => `/${segments.join('/')}`)
    ).subscribe(currentPath => {
      // 这里写你的判断逻辑，示例：路径包含"dashboard"时显示内容
      this.showTargetContent = currentPath.includes('/dashboard');
      
      // 也可以针对单个路由段判断，比如：
      // this.showTargetContent = segments.some(seg => seg.path === 'profile');
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，防止内存泄漏
    this.routeSub?.unsubscribe();
  }
}

然后在app.component.html里用*ngIf绑定这个变量：

<!-- 需要控制显示的内容 -->
<div *ngIf="showTargetContent">
  <h3>特定路由下才会显示的内容 😎</h3>
  <p>当前路由符合条件，我就出现啦！</p>
</div>

<!-- 始终显示的内容 -->
<div>
  <p>不管路由怎么变，我都在这里～</p>
</div>

方法二：用Async管道（更简洁，无需手动管理订阅） #

如果你不需要在订阅里做太多额外逻辑，直接把路由Observable转换成布尔值Observable，用Angular的Async管道绑定，它会自动帮你处理订阅和取消订阅：

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 直接创建一个布尔值的Observable
  showTargetContent$: Observable<boolean>;

  constructor(private route: ActivatedRoute) {
    this.showTargetContent$ = this.route.url.pipe(
      map(segments => `/${segments.join('/')}`.includes('/dashboard'))
    );
  }
}

模板里这样用：

<div *ngIf="showTargetContent$ | async">
  <h3>特定路由下才会显示的内容 😎</h3>
  <p>当前路由符合条件，我就出现啦！</p>
</div>

额外小技巧：监听路由参数变化 #

如果你的需求是根据路由参数（比如/user/:id里的id）来控制显示，那可以监听route.params而不是route.url：

this.route.params.pipe(
  map(params => params['id'])
).subscribe(userId => {
  // 示例：当id为"123"时显示内容
  this.showTargetContent = userId === '123';
});

这样就能完美实现基于路由动态控制内容显示隐藏的需求啦！

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