为嵌套子组件提供输入

Question

我正在 Angular 中构建一个自定义复合组件。假设它是一个包含组件 B 的组件 A，依此类推 - 直到组件 D - 是最深的一个。 A > B > C > D

我想在组件 A 上提供一个@Input，它将接受来自外部世界的 TemplateRef<any> 并将其传递给组件 D。组件 B 和 C 不使用该模板，只是为了清除。

我是否必须在组件 B 和 C 上创建中间输入，或者我可以以某种方式（通过 DI？）从组件 D 查询组件 A，就好像在说“嘿 A，你有我的模板吗？”

（这实际上不仅适用于 TemplateRef 输入）。

Answer 1

每个组件在应用的 Injector Tree 中都有自己的 Injector。

所以您可以在 ComponentD 构造函数中请求父 ComponentA，然后在初始化之后（也就是在 ComponentD 的 OnInit 之后）请求它

语法是：

export class AppComponentD implements OnInit  {
  something: any;
  constructor (private myParentAd: AppComponentA) {}

  ngOnInit() {
    this.something = this.myParentAd.getSomething();
  }

  ...
}

这是一个stackblitz 演示这个

注意：如果您尝试创建一个没有 ComponentA 父级的 ComponentD，它将引发错误。你可以在构造函数中使用@Optional decorator 来避免这种情况。