單擊 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();
}