Angular：显示带有嵌套子项的内容投影

Question

我有一个组件，我想在子组件中显示可配置的 html。 客户端无法访问子组件。 所以我认为我正在寻找的是内容投影

<Parent>
 <ng-template #editTemplate> //custom 
   <button>Edit Me </button>
 </ng-template>    
 <child1>
     ...
     <child4>
       I would like to show the #editTemplate here
     </child4>
 </child1>
</Parent>

所以在child4里面

我有这个 HTML

<div>
  <ng-content #editTemplate></ng-content>
</div>

但是我无法显示按钮。 我在这里做错了什么？

Answer 1

您在这里拥有的是内容投影和依赖注入的有趣组合。

<ng-template #editTemplate>被内容投影到Parent组件中

<Parent>
 <ng-template #editTemplate> <--- projected into <Parent>
   <button>Edit Me </button>
 </ng-template>
</Parent>

所以Parent可以通过Content Child直接引用它，如果您的Parent组件看起来像这样：

@Component({
  selector: 'parent',
  template: `
  <h2>Parent here!</h2>

  <ng-content></ng-content> <--- #editTemplate will get projected here

  <child1></child1>
  `,
  styles: [`h1 { font-family: Lato; }`],
})
export class ParentComponent {
  @ContentChild('editTemplate') editTemplate: TemplateRef<any>; // <--- reference to #editTemplate
}

然而， child4嵌套了好几层，所以依赖注入是你的朋友，否则你需要在每一层配置一个引用来完成从Parent到child4的链。

但是，使用 DI，您可以将Parent组件直接注入child4 ，然后 child4 可以访问Parent组件实例上的editTemplate引用并使用*ngTemplateOutlet插入来自该TemplateRef的视图。

所以child4可能看起来像这样：

@Component({
  selector: 'child4',
  template: `
  <h3>Child 4 here!</h3>
  <div>And here's the injected template:</div>

  <ng-container *ngTemplateOutlet="projectedTemplate"></ng-container> <--- use *ngTemplateOutlet to render editTemplate
  `,
  styles: [`h1 { font-family: Lato; }`],
})
export class Child4Component {
  projectedTemplate: TemplateRef<any>;

  constructor(private parentComponent: ParentComponent) {} // <-- inject ParentComponent instance

  ngOnInit() {
    this.projectedTemplate = this.parentComponent.editTemplate; // <-- set *ngTemplateOutlet to editTemplate
  }
}

这是一个 StackBlitz展示了这种方法。