如何在 Angular 中将模板从子组件传递给父组件

Question

我有一个像这样的角度布局，我想从子组件更改父组件中的标题部分。

我用谷歌搜索了这个问题，但我只看到了有关将模板从父组件传递到子组件的文章。

有没有办法将模板从子组件传递到父组件？

或者有什么方法可以将组件从子组件注入到父组件的标头部分？

我知道我可以将值传递给父级，但我需要传递模板或组件。

Answer 1

从架构的角度来看，这个想法并不是很好，考虑到某些组件应该如何影响其他组件、从根到叶的数据流和角度变化检测。但这仍然是可能的

// parent.ts
setHeaderTemplate(templateRef: TemplateRef) {
  this.headerTemplate = templateRef
}
// parent.html
<div *ngTemplateOutlet="template">
</div>

// child.ts
@ViewChild(TemplateRef) headerTpl: TemplateRef;
constructor(private parent: ParentComponent) {}

ngAfterViewInit() {
  Promise.resolve().then(() => this.parent.showHeaderTemplate(this.headerTpl));
}
// child.html
<ng-template #header>
  hello header
</ng-template>

请注意，“显示”子级中的模板逻辑是在异步代码中完成的。这样做是因为 Angular 的更改检测性质，在评估 ngAfterViewInit 时，父组件上已经完成了更改检测。