从父组件关闭模态

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 之类的内容。

Close modal from the parent component