Невозможно поделиться / запустить событие щелчка родительского компонента в дочернем компоненте

Question

Я новичок в angular, вот моя проблема: -

У меня есть родительский компонент, в котором я вызываю дочерний компонент, использующий, к которому прикреплено событие 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;

Рабочая демонстрация