将模板从子组件嵌入到父组件

编程问答 2022-04-25

问题描述

我有一个组件，它有一个辅助模板，需要有条件地出现在父组件中，我想将数据从该子组件传递回其父组件。

我正在使用 ngTemplateOutlet，我可以做我需要的一切，除了将数据传回父级，我正在使用服务来做到这一点，但我想知道这是否可能让模板携带它让父级从那里通过一些绑定访问它？

enter image description here

页面+顶部栏（1）来自父组件，如您所见，第二个组件分为2个，顶部仅在我需要父母知道的特定条件下才会出现，因此它隐藏了它content 并改为显示子模板

组件 2 模板：

<ng-template #bbutton>
  <a (click)="bingo()>do it</a>
</ng-template>

组件 2 ts：

@viewChild('bbutton',{static: false}) bbutton: TemplateRef<any>;

Promise.resolve().then()( => this.parentCompoenet.setButtonTemplate(this.bbutton));

组件 1 模板：

<ng-container *ngTemplateOutlet="bbutton"></ng-container>

组件 1 ts：

bbutton: any;
setButtonTemplate(template: TemplateRef<any>){
  this.bbutton = template;
}

更新 当前方法的另一个问题是使这里的子组件趋向于父组件，我不希望这样，因为这个子组件需要成为另一个组件的子组件。所以我需要一种方法来传递这些模板而不将两者联系在一起。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularangular-uidata-binding