单击 X 按钮时关闭 Angular 模态

Question

我正在学习Angular ，我在我的项目中做了一个Modal。 如果我单击具有openDialog() function 的 class，它会打开模式。

我希望在单击X时也能够关闭该模式。

  <a class="portfolio__item" target="_blank" (click)="openDialog()">
        <img src="assets/img/mywork-img/portfolio-05.jpg" alt="" class="portfolio__img">
    </a>

<dialog id="my-dialog-pubcrawl" class="my-dialog">
   
   <div class="np-row">
    <div class="np-title">This is a dialog window</div>

    <div class="np-close-btn" title="Close">X</div> 
</div>
    
</dialog>

.ts 文件：这将打开模态

  openDialog() {
    let myDialogPubcrawl:any = <any>document.getElementById("my-dialog-pubcrawl");
    myDialogPubcrawl.showModal();
}

模式：

如何通过单击 Angular 中的 X 关闭模式？

Answer 1

实现这一点的一种方法是存储对话框的实例并调用关闭方法：

<a class="portfolio__item" target="_blank" (click)="openDialog()">
        <img src="assets/img/mywork-img/portfolio-05.jpg" alt="" class="portfolio__img">
    </a>

<dialog id="my-dialog-pubcrawl" class="my-dialog">
   
   <div class="np-row">
    <div class="np-title">This is a dialog window</div>

    <div class="np-close-btn" title="Close" (click)="closeDialog()">X</div> 
</div>
    
</dialog>

myDialogPubcrawl:any;

openDialog() {
    this.myDialogPubcrawl = <any>document.getElementById("my-dialog-pubcrawl");
    this.myDialogPubcrawl.showModal();
}

closeDialog() {
    this.myDialogPubcrawl.close();
}