從槽中的子調用父組件方法

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 。 不得不在 object 中講述我的方法。

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