Angular+TypeScript中Subscribe赋值后面包屑UI无法更新问题

根因说明 #

该问题是Angular变更检测未触发导致：要么组件启用了ChangeDetectionStrategy.OnPush变更检测策略，要么路由事件的回调执行后没有通知Angular更新UI，所以即使变量值修改成功，模板也不会刷新。

修复方案 #

方案1：手动触发变更检测（快速适配原有代码） #

1. 导入并注入变更检测工具：

import { ChangeDetectorRef } from '@angular/core';

// 构造函数中注入
constructor(private cdr: ChangeDetectorRef) {}

2. 修正原有订阅逻辑，补充清空旧值和触发变更检测的代码：

this.router.events
  .pipe(filter((evt: any) => evt instanceof RoutesRecognized), pairwise())
  .subscribe((events: RoutesRecognized[]) => {
    // 先清空旧值，避免多次路由后内容累加错误
    this.backTo = '';
    let prevUrl = events[0].urlAfterRedirects.toLowerCase().split('/');
    var data = prevUrl[prevUrl.length - 1];
    var urlString = data.split("-");
    urlString.forEach(data => {
        this.backTo += data[0].toUpperCase() + data.substring(1) + ' ';
    });
    // 标记当前组件需要进行变更检测
    this.cdr.markForCheck();
  });

方案2：使用async管道（更符合RxJS最佳实践） #

将变量改为Observable类型，通过async管道自动管理订阅和变更检测：

1. 组件逻辑调整：

import { map } from 'rxjs';

// 声明Observable变量
backTo$ = this.router.events.pipe(
  filter((evt: any) => evt instanceof RoutesRecognized),
  pairwise(),
  map((events: RoutesRecognized[]) => {
    const prevUrl = events[0].urlAfterRedirects.toLowerCase().split('/');
    const data = prevUrl[prevUrl.length - 1];
    const urlSegs = data.split("-");
    return urlSegs.map(seg => seg[0].toUpperCase() + seg.substring(1)).join(' ');
  })
);

2. 模板调整：

<a class="col-md-6 float-left" routerLink="." (click)="onBackClick()">&lt; Back {{ backTo$ | async }}</a>

补充优化 #

如果需要首次进入页面就正常显示面包屑，可在pipe中补充startWith操作符注入初始路由状态，解决pairwise需要至少两次事件才会触发输出的问题。

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