Tengo un componente que acepta una función de devolución de llamada @Input() closeCallback: () => void;
y lo llama en una función de cierre como esta:
close() { this.closeCallback(); } <button class="close" (click)="close()"> <img src="assets/img/share/icon_close_dark.svg" /> </button>Entonces, en el componente principal, le pasé una función:
<ng-container *ngIf="isPopupOpen"> <e2-fullscreen-popup [title]="'top promotions'" [closeCallback]="closePopup" > ... </e2-fullscreen-popup> </ng-container> closePopup() { this.isPopupOpen = false; console.log('this.isPopupOpen',this.isPopupOpen); } Entonces, ¿por qué no puedo eliminar el componente al hacer clic en el botón, incluso si los registros mismos muestran que this.isPopupOpen es falso?
@Input se usa para pasar datos al componente secundario; para implementar una devolución de llamada, debe usar @Output .
En su componente hijo:
@Output() closeCallback = new EventEmitter(); // ... close() { this.closeCallback.emit(); }En su componente principal:
<ng-container *ngIf="isPopupOpen"> <e2-fullscreen-popup [title]="'top promotions'" (closeCallback)="closePopup($event)" > ... </e2-fullscreen-popup> </ng-container> closePopup(dataFromChild: any){ // handle callback this.isPopupOpen = false; console.log('this.isPopupOpen',this.isPopupOpen); }