Angular路由异步解析器：如何让activatedRoute.data直接返回数据而非Observable？

Angular中activatedRoute.data本身就是Observable类型，这是框架的设计逻辑——因为路由数据可能在组件生命周期内发生变化（比如同组件路由参数更新时，解析器会重新执行并推送新数据）。但你可以通过以下两种方式实现直接在模板中使用解析后的数据，无需每次添加async管道：

1. 组件内订阅并存储数据 #

在组件的ngOnInit中订阅activatedRoute.data，将解析后的数据存入组件属性，模板直接引用该属性：

组件代码：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-foo',
  templateUrl: './foo.component.html',
})
export class FooComponent implements OnInit {
  barData: string[] = [];

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 订阅路由数据，更新组件属性
    this.route.data.subscribe(({ bar }) => {
      this.barData = bar;
    });
  }
}

模板代码：

{{ barData | json }}

注意：若组件会被多次复用，记得在组件销毁时取消订阅，避免内存泄漏（可使用takeUntil等RxJS操作符）。

2. 使用模板变量缓存async管道结果 #

在模板中通过*ngIf结合async管道，将解析后的路由数据赋值给模板变量，后续直接引用该变量：

模板代码：

<ng-container *ngIf="route.data | async as routeData">
  {{ routeData.bar | json }}
</ng-container>

这种方式无需在组件内写订阅逻辑，Angular会自动管理订阅的生命周期，避免内存泄漏。

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