从父组件关闭模态

Question

所以我得到了这个父组件，我们称它为 List，它具有属性addModal: boolean; 和一个

<button 
    (click)="addModal = true">
    Show Modal
</button>

在模板中，通常在单击时显示模态组件，如下所示：

<app-modal *ngIf="addModal"></app-modal>

app-modal是一个单独的组件，我希望能够从其中关闭模态。 当我学习 Angular 时，我了解到可以使用EventEmitter来完成。 我被困在这一点上，这就是我现在所拥有的，但无法弄清楚如何监听那个关闭事件......这就是 Modal 组件的样子：

@Output() addModal = new EventEmitter();

decline() {
   this.addModal.emit(true);  //?  console logs the EventEmitter object
}

在模态模板中：

<button (click)="decline()"></button>

我知道我应该在父组件中捕捉到它，但无法准确地弄清楚......

非常感谢任何帮助

Answer 1

您可以在主机元素上侦听发出的事件，其中$event是发出的值，在您的情况下为true ：

<app-modal *ngIf="addModal" (addModal)="doSomething($event)"></app-modal>

作为一般提示，名称addModal并不是一个好名称，因为它不能解释事件。 考虑将其更改为类似declined的内容。