是否可以为 Angular 中的每个父项提供一个新的依赖项实例？

Question

是否可以为每个父项提供一个新的依赖实例？我正在尝试创建一个 composer 指令，如果 composer 指令的另一个实例是它的子实例，它会增加提供的服务中的计数器，因此我可以相应地托管绑定 class。

<div composer> <!-- 1 - parent -->
    ...
    <div composer> <!-- 2 - child -->
        ...
        <div composer></div> <!-- 3 - grandchild -->
    </div>
    ...
</div>

<!-- Resets counter since this composer is root -->
<div composer> <!-- 1 - parent -->
...
</div>

这是我创建的堆栈闪电战，我研究了分层注入器，但我怀疑这可能无法为每个父元素创建一个新实例 https://stackblitz.com/edit/angular-ivy-g9rwvu?file=src%2Fapp%2Fcomposer%2Fcomposer.directive.ts

如果我在提供者中传递服务，将为每个指令创建一个新的服务实例，但我只想为 parent/root 作曲家指令获取一个新实例。

简而言之，我想做的是类似于 React 的 useContext 挂钩，我可以在其中传递子级上下文并在创建新父组件时设置新上下文

Answer 1

我在分层注入器的帮助下实现了这个。 https://stackblitz.com/edit/angular-ivy-xml2kq。基本上你可以注入指令的另一个实例，如果它已经在树中，并增加你的级别。

constructor(@SkipSelf() @Optional() protected parent: Composer) {}

ngOnInit() {
  this.$level = this.parent ? this.parent.$level + 1 : 1;
}

如果您需要访问模板中组件的某些字段，您可以使用exportAs: 'someName'然后#tplVar="someName"。使用这样的代码，您可以在 tplVar.

的帮助下引用指令实例

如果您需要“标题问题”的答案。可以为指令的每个实例提供服务实例。只需在指令的 providers 中提及它，而不是在 ngModule 的

中

是否可以为 Angular 中的每个父项提供一个新的依赖项实例？

Is it possible to provide a new instance of a dependency for each parent in Angular?

angular

dependency-injection

service