如何在单击关闭按钮时在角度材料角度 8 中单独关闭多个对话框答案

【问题标题】：How to close multiple dialog individually in angular metarial angular 8 on click of close button如何在单击关闭按钮时在角度材料角度 8 中单独关闭多个对话框
【发布时间】：2020-09-11 16:43:28
【问题描述】：

我正在使用 Angular 8 金属。我有 2 个对话框，当我单击一个按钮时，将打开一个对话框，然后当我单击第一个对话框上的一个按钮时，将打开另一个对话框。这里我使用对话框而不是对话框。这里的主要问题是我想关闭单击关闭按钮时单独对话框。现在，当我想在单击关闭按钮时关闭第二个对话框时，第一个对话框正在关闭。下面是代码

home.component.html

<div>
 <div class="alert alert-info">
 <strong>Angular Material Dialog Component</strong>
 </div>
</div>
<div>
 <h2>Simple Dialog With Action Button</h2>
 <button mat-raised-button (click)="dialog()">Click Me To Open Dialog</button>
</div>

home.component.ts

import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router'; 
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogConfig } from '@angular/material';
import { DialogComponentComponent } from '../dialog-component/dialog-component.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  simpleDialog: MatDialogRef<DialogComponentComponent>;
  constructor(private router: Router,private dialogModel: MatDialog) { }

  ngOnInit() {}
     
dialog() {
 this.simpleDialog = this.dialogModel.open(DialogComponentComponent, {
  height: '400px',
  width: '600px',
});
 }

}

对话框组件.html

<h1 mat-dialog-title>Hello There</h1>
 <div mat-dialog-content>
 <p>This Is a Simple Dialog</p>
 <button (click)="openDialogWithTemplateRef()">Click to open other dialog</button>
 </div>
 <div mat-dialog-actions>
 <button mat-button (click)="close()">Close</button>
 </div>
 
<ng-template #secondDialog>
  <h2 matDialogTitle>Lovely dialog!</h2>
  <button mat-button (click)="close()">Close</button>
</ng-template>

对话框组件.ts

import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
  selector: 'app-dialog-component',
  templateUrl: './dialog-component.component.html',
  styleUrls: ['./dialog-component.component.css']
})
export class DialogComponentComponent implements OnInit {

  constructor(private dialog: MatDialog, public dialogRef: MatDialogRef<DialogComponentComponent>) { }
@ViewChild('secondDialog', { static: true }) secondDialog: TemplateRef<DialogComponentComponent>;

  openDialogWithTemplateRef(templateRef: TemplateRef<DialogComponentComponent>) {
    this.dialog.open(this.secondDialog);
  } 
 
  ngOnInit() {
  }
close(): void {
 this.dialogRef.close();
 }
}

package.json

"@angular/material": "^8.2.3",

【问题讨论】：

标签： angular

【解决方案1】：

$event.stopPropagation()

使用 stopPropagation 防止第二个对话框受到点击第一个对话框的影响。为此，您必须在 close() 函数中传递 $event 并进行此调用。

最好的问候。

【讨论】：

【解决方案2】：

您可以通过两种方式做到这一点。

1] home.component.ts

dialog() {
    this.dialogModel.open(DialogComponentComponent
        , { height: '400px', width: '600px', disableClose: true } );
}

2] 对话框组件.ts

constructor([Dependency Injections and other local objects]){
    this.dialog.disableClose = true;
    this.dialog.open(this.secondDialog);
}

【讨论】：