无法在子组件中共享/触发父组件的点击事件

Question

我是新手，这是我的问题：-

我有一个父组件，在其中我要使用调用子组件，该组件附加了click事件。现在我想调整子组件中的click事件功能，但出现错误。

这是我的代码：-parent.html：-

<button (click)="openPopup('second popup')">open2</button>
<app-popup>
    <!-- Modal content -->
    <button (click)="savePopup('second popup')">save</button>
    <p>Some text in the Modal..</p>
</app-popup>

parent.ts：-

openPopup(content:string) {
   this.content = content;
   this.popupModalService.openPopup(this.elRef);
} 

app-popup.html：-

<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
    <span class="close" (click)="closePopup()">&times;</span>
    <ng-content></ng-content>
</div>

app-popup.ts

@Output() click: EventEmitter<string> = new EventEmitter<string>();
savePopup(data:string) {
   alert('clicked para' + data);
}

我想在app-popup.ts中定义保存弹出功能单击时出现错误：TimelineComponent.html：38错误TypeError：_co.savePopup不是函数

Answer 1

尝试这样：

parent.html

<button (click)="openPopup('second popup')">open2</button>
<app-popup #popupRef>
    <button (click)="popupRefChild.savePopup('second popup')">save</button>
    <p>Some text in the Modal..</p>
</app-popup>

parent.ts

import { PopupComponent } from "../popup/popup.component";


@ViewChild("popupRef", { static: false }) popupRefChild: PopupComponent;

Working Demo