Angular中如何在订阅外部获取值？路由值无法在HTML渲染

可能原因及解决方法 #

1. 初始化currentUrl变量 #

你的代码里currentUrl未初始化，第一次触发NavigationEnd事件时，this.previousUrl = this.currentUrl会赋值为undefined，只有后续导航才会生成正确值。先在组件构造函数中初始化currentUrl为当前路由：

export class TransactionDetailsPaymentsComponent implements OnInit {
  previousUrl: any = null;
  currentUrl: string;

  constructor(private router: Router, private urlService: UrlService) {
    this.currentUrl = this.router.url; // 初始化当前路由地址
  }

  ngOnInit(){
    this.router.events.pipe(
      filter((event) => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      this.previousUrl = this.currentUrl;
      this.currentUrl = event.url;
      this.urlService.setPreviousUrl(this.previousUrl);

      this.getPrevUrl();
    });
  }

  getPrevUrl(){
    console.log(this.previousUrl);
  }
}

2. 手动触发变更检测 #

如果组件使用了OnPush变更检测策略，或者路由事件回调执行在Angular变更检测周期之外，视图不会自动更新。可以注入ChangeDetectorRef手动触发视图更新：

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

export class TransactionDetailsPaymentsComponent implements OnInit {
  previousUrl: any = null;
  currentUrl: string;

  constructor(
    private router: Router, 
    private urlService: UrlService,
    private cdr: ChangeDetectorRef // 注入变更检测服务
  ) {
    this.currentUrl = this.router.url;
  }

  ngOnInit(){
    this.router.events.pipe(
      filter((event) => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      this.previousUrl = this.currentUrl;
      this.currentUrl = event.url;
      this.urlService.setPreviousUrl(this.previousUrl);

      this.getPrevUrl();
      this.cdr.detectChanges(); // 手动触发变更检测，更新视图
    });
  }

  getPrevUrl(){
    console.log(this.previousUrl);
  }
}

3. 检查组件变更检测策略 #

如果组件元数据中设置了changeDetection: ChangeDetectionStrategy.OnPush，除了手动触发变更检测，也可以通过@Input()传递数据、使用异步管道绑定可观察对象等方式，让Angular自动感知变更。针对当前场景，手动触发变更检测是最直接的解决方案。

验证HTML绑定 #

确保HTML模板中的变量绑定无拼写错误：

<p>{{ previousUrl }}</p>

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