Angular组件中如何监听路由数据解析器变化并刷新数据？

核心原因 #

Angular在导航到同一组件的不同路由参数时，不会销毁重建组件，所以构造函数、ngOnInit只会执行一次；ngOnChanges仅监听组件**输入属性（@Input）**的变化，路由参数/数据的变更不会触发它。

方案1：订阅ActivatedRoute.data Observable #

这是最贴合你现有Resolver架构的方案，直接监听路由数据的变化，每次Resolver返回新数据时自动更新组件：

组件代码示例 #

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

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit, OnDestroy {
  product: any;
  private dataSubscription!: Subscription;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 订阅路由数据流，Resolver返回新数据时自动触发
    this.dataSubscription = this.route.data.subscribe((data) => {
      this.product = data['product'];
      // 可在此添加数据更新后的额外逻辑，比如重置组件内部状态、重新渲染子组件等
    });
  }

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

方案2：订阅ActivatedRoute.params手动触发数据获取 #

如果需要更灵活控制数据获取逻辑（比如跳过Resolver直接调用服务），可以监听参数变化后手动请求数据：

组件代码示例 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { ProductService } from './product.service'; // 假设你有封装GraphQL请求的服务

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit, OnDestroy {
  product: any;
  private paramsSubscription!: Subscription;

  constructor(
    private route: ActivatedRoute,
    private productService: ProductService
  ) {}

  ngOnInit(): void {
    // 监听路由参数变化，切换产品代码后重新请求数据
    this.paramsSubscription = this.route.params.pipe(
      switchMap(params => {
        const productCode = params['productCode'];
        return this.productService.fetchProduct(productCode); // 调用GraphQL请求方法
      })
    ).subscribe(product => {
      this.product = product;
    });
  }

  ngOnDestroy(): void {
    this.paramsSubscription?.unsubscribe();
  }
}

额外提示 #

• 若使用Angular 12+，也可以在模板中用async管道自动管理订阅，比如：{{ (route.data | async)?.product | json }}，无需手动写订阅和取消逻辑。
• 方案1完全兼容你现有的路由和Resolver配置，无需修改Resolver代码，保留了组件加载前预加载数据的特性。

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