时间戳

首页 > 解决方案 > 以编程方式创建 Angular 分层注入器

angular - 以编程方式创建 Angular 分层注入器

问题描述

我目前使用@Directive带有一组提供程序的 a 来为没有它的任何组件创建一组隔离的可注入服务/值。

@Directive({
  selector: '[my-isolated-directive]',
  providers: [MyHierarchicalService]
})
export class MyIsolatedDirective {}

<ng-container my-isolated-directive>
  <component-that-interacts-with-isolation></..>
  <component-that-requires-isolation></...>
</ng-container>

这很好用，但需要我在视图中引入一组新代码，除了用服务打开一个新的分层注入器之外，它可以说没有任何关系。

我的问题：是否可以在没有指令帮助的情况下以编程方式执行此操作？我知道可以手动创建一个注入器，Injector.create([MyHierarchicalService], parent)但我可以允许这个注入器本地用于子组件吗？

providers: [MyHierarchicalService]简单地将其移动到组件中是不可行的，<component-that-requires-isolation>因为该隔离内的多个组件将需要相同的服务。它可以看作是在分层注入器中“打开一个空间”，在它下面，所有组件共享相同的服务。

使用我当前的解决方案简化 stackblitz 示例： https ://stackblitz.com/edit/angular-zqxn4f

感兴趣时与我的隔离空间的实际指令： https ://github.com/opf/openproject/pull/7042/files#diff-22f5fc2b9b761e556ed425d5e8b93fb4R70

使用指令解决方案的实际代码： https ://github.com/opf/openproject/pull/7042/files#diff-09e0b8f2cf13d8ecc8ccc45872068580R7

标签： angulardependency-injectionhierarchical

解决方案

推荐阅读