时间戳

首页 > 解决方案 > 在 Angular 9 中，有没有办法将“策略”注入到路由组件中？

angular - 在 Angular 9 中，有没有办法将“策略”注入到路由组件中？

问题描述

假设我有一个代表页面的通用 UI 组件。我想将此组件用于多个路由，并且行为会根据加载它的路由而有所不同。因此，我需要根据路线向该组件中注入“策略”。

有没有办法做到这一点？或者这不是一个好方法？

作为参考，该组件是一个列表页面，其中列出了表格中的现有记录并具有基本功能，例如：编辑、查看、搜索等。到目前为止，我已经创建了多个非常相似的组件并在路由中使用它们（一个对于每种记录类型）。但这有相当大的开销，例如确保它们看起来相同，确保它们具有相同的功能。

标签： angulardependency-injection

解决方案

如果不知道你的“不同策略”涉及什么（最好是最小的 stackblitz repro），很难给你确切的建议，但我想你可以使用resolver。

基本上你定义了一个解析器，它将为指定的路由提供一些东西。解析器可以访问当前路由快照和状态快照，因此您可以访问 params、queryParams 等来解析您的数据。它也可以异步工作。

它可能是用于在组件中提供逻辑的服务（例如，用户的 UserService、产品的 ProductsService 等——只要它们共享相同的接口）。

它还可能提供其他内容 - 例如记录、列列表等。

您还可以为不同的路线提供不同的解析器，无论您感觉如何。

然后，您可以使用以下内容访问组件中已解析的数据：

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit(): void {
  this.data = this.route.snapshot.data;
}

推荐阅读