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

发布于05月28日

我有一个组件，我想在子组件中显示可配置的html.客户端无法访问子组件.所以我想我要找的是content projection

<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>

但是，我无法显示按钮.我做错了什么？

推荐答案

这里有一个有趣的内容投影和依赖注入的组合.

<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嵌套了好几层，因此依赖注入在这里是您的朋友，否则您需要配置一个引用in each layer来完成从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
  }
}

Here's a StackBlitz显示此方法.