Angular组件跟踪路由数据解析器的变化

Question

在Angular组件中获取路由数据解析器变化的最佳方式是什么?

我正在尝试构建一个显示来自GraphQL端点的数据的组件。使用路由数据解析器获取数据，该解析器在加载组件之前检索数据。

但是，我希望能够在路由参数改变时刷新组件中的数据。是否有一种方法可以在组件中获取更新的数据，或者我需要使用其他方法?

目前，这是我的路由配置

{
path: 'product/:productCode',
component: ProductComponent,
resolve: {
product: ProductResolver
}
}

在我的组件的构造函数中，我通过以下方式检索数据

constructor(route: ActivatedRoute) {
const product = route.snapshot.data.product;
}

对于解析器，它只检索数据，并且对问题无关紧要。

在第一次初始化时，检索数据没有问题，但是当我导航到具有不同路由参数的相同组件时(productCode)。

我知道组件已经初始化，构造函数只在初始化期间运行。但是我尝试过使用ngOnInit和ngOnChanges生命周期钩子，但这些似乎只在组件首次加载时运行，而不是在数据更改时运行。

对于如何解决这个问题，任何建议或例子都将不胜感激。

Answer 1

在提供的代码中activatedRoute。使用快照，快照未更新。但你可以从activatedRoute本身获取实际数据，但它是可观察的。像这样的代码应该做得很好:

route.data.subscribe(({product}: {product: Product}) => {
this.product = product;
// any other code that should be executed when values changes
})