嵌套 ng-content 的父注入器无法正常工作答案

【问题标题】：parent injector not working correctly for nested ng-content嵌套 ng-content 的父注入器无法正常工作
【发布时间】：2021-07-19 07:18:24
【问题描述】：

在使用<ng-content></ng-content>进行内容投影时，通常可以通过依赖注入来访问父组件：

@Component({
  selector: 'app-parent',
  template: 'Parent / <ng-content></ng-content>'
})
export class ParentComponent {}

@Component({
  selector: 'app-child',
  template: 'Child / Has parent: {{parentComponent != null}}'
})
export class ChildComponent {
  constructor(@Optional() public parentComponent: ParentComponent) {}
}

<app-parent>
  <app-child></app-child>
</app-parent>

<!-- this will output Parent / Child / Has parent: true -->

但是，当添加另一个层时，这似乎不起作用，尽管 app-parent 仍然是 DOM 中 app-child 的直接父级：

@Component({
  selector: 'app-host',
  template: `Host / <app-parent><ng-content></ng-content></app-parent>`
})

<app-host>
  <app-child></app-child>
</app-host>

<!-- this will output: Host / Parent / Child / Has parent: false -->

另请参阅此 stackblitz 示例：https://stackblitz.com/edit/angular-ivy-e7c6i8?file=src/app/app.component.html

即使在嵌套场景中，是否有某种方法可以从 ChildComponent 访问 ParentComponent？

【问题讨论】：

标签： angular

【解决方案1】：

这不起作用，因为ChildComponent 被投影为HostComponent 的内容。所以在 HierarchicalInjector 眼中ChildComponent 和ParentComponent 是兄弟姐妹，因为它们都是HostComponent 的孩子。

您可以通过使用forwardRef 并在适当的生命周期挂钩中分配值使您的HostComponent 成为ParentComponent 的提供者来绕过它，但如果这样可行，那么说至少，因为引用的实际值在注入依赖组件期间将为空。

基本上，尝试直接访问父组件是一种不好的做法，您应该尽量避免这种做法。而是使用@Input / @Output 进行子-父之间的通信。如果有很多逻辑发生，您可以改为创建一个单独的服务（可以是单例，即在应用程序级别提供，也可以由其他组件提供，例如ParentComponent，因此仅限于一个父级-子对。）。

【讨论】：