angular - 以 Angular 6 向子组件插入模板

Question

在这种情况下，app-child是不能改变的，也就是说你只能操作app-parent。我的意见是想办法在 app-child 中插入模板，是否有类似 Renderer2.insert(parent, newItem, childRef) 或其他解决方案的功能？

看https://stackblitz.com/edit/insert-template-to-child-component了解详情。

app.component.html

<app-parent>
  <ng-template #childTemplate>
    how to insert this template in app-child
  </ng-template>
</app-parent>

parent.component.html

<app-child>
  <!-- <ng-template #childTemplate>
    this is work, but I need to input the template in app-parent content
  </ng-template> -->
</app-child>

child.component.html

<ng-container [ngTemplateOutlet]="childTemplate"></ng-container>

Answer 1

您可以将模板作为 @Input() 传递给 child

parent.component.html

<ng-template #childTemplate></ng-template>

<app-child [childTemplate]="childTemplate"></app-child>

child.component.ts

@Input()
childTemplate: TemplateRef<any>;

child.component.html

<ng-container [ngTemplateOutlet]="childTemplate"></ng-container>

---

如果需要，您可以使用相同的策略将模板向下传递到多个级别。

---

更多详细信息:https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/#configurablecomponentswithtemplatepartialinputs