为嵌套的子组件提供输入

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

每个组件在您的应用的注入树中都有自己的注入器。

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

语法为：

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

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

  ...
}

这是<{3}}这个

的恶魔

注意：如果您尝试创建没有ComponentA父级的ComponentD，则会抛出错误。你可以在构造函数中stackblitz来避免这种情况。