如何用不同的数据渲染相同的 Angular 组件？ 我有一个基于 url 部分呈现的 Angular 组件

Question

我有一个组件，它基于 URL - '/lp/:pageId' 渲染数据， :pageId 负责从ngOnInit()调用的服务器获取数据。

ngOnInit(){
  this.apiHelper.getData(this.route.snapshot.params.pageId);
}

我在 -> 时遇到问题

• 我打开/lp/apple => 这会获取与苹果相关的数据并正确呈现
• 但是，当我在/lp/apple上并按下导航到/lp/banana => 的链接时，只有路线会发生变化，但不会获取任何数据，因为组件已经加载。

我尝试在路由更改时调用 function 来获取数据，但这会破坏一些现有功能。

有关此问题的良好 Angular 实践的任何帮助都会有所帮助。 谢谢你。

Answer 1

您可以反应性地定义数据。 您可以定义一个依赖于路由参数的可观察数据，而不是在ngOnInit内部获取（因为 angular 将路由参数作为活动路由上的可观察对象提供）：

public data$ = this.route.paramMap.pipe(
    map(params => params.get('pageId')),
    switchMap(pageId => this.apiHelper.getData(pageId))
);

constructor(private route: ActivatedRoute) { }

在这里，只要路由参数发生变化， data$ observable 就会发出apiHelper.getData()的结果。