从插槽中的子组件调用父组件方法

Question

是否可以从插槽中的子方法调用父方法？例如：

parent.component.ts

methodFromParentComponent() {
console.log('fires...')
}

然后是这样的：

<parent-component>
<child-component (click)="methodFromParentComponent"></child-component>
</parent-component>

当然那是行不通的。我试着用ngTemplateOutlet:进行实验

<parent-component [slotTemplateRef]="slotTemplateRef">
<ng-template #slotTemplateRef let-methodFromParent>
<button  (click)="methodFromParent">Navigate</button>
</ng-template>
</parent-component>

问题是，它会触发两次，因为事件会冒泡，这是有道理的。有关于我应该使用什么的说明吗？

Answer 1

如果添加模板引用变量，您的第一个代码示例可以工作

<parent-component #parent>
<child-component (click)="parent.methodFromParentComponent()"></child-component>
</parent-component>

Answer 2

事实证明它适用于ngTemplateOutlet。不得不在一个对象中讲述我的方法。

<ng-container *ngTemplateOutlet="layoutTemplate; context: { context: templateContext }">
</ng-container>

<parent-component>
<ng-template let-context="context">
<child-component (click)="context.methodFromParentComponent()">
</child-component>
</ng-template>
</parent-component>