如何点击带routerLink的按钮后关闭Angular Material Dialog

解决方案 #

你只需要两步修改即可实现点击路由按钮时自动关闭对话框：

1. 修改对话框组件的TS代码，注入MatDialogRef并添加关闭方法

import { Component, OnInit, Inject } from '@angular/core';
// 新增导入MatDialogRef
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';

@Component({
  selector: 'app-dashboarddialog',
  templateUrl: './dashboarddialog.component.html',
  styleUrls: ['./dashboarddialog.component.css']
})
export class DashboarddialogComponent implements OnInit {
  // 构造函数新增注入MatDialogRef
  constructor(
    @Inject(MAT_DIALOG_DATA) public data: any,
    private dialogRef: MatDialogRef<DashboarddialogComponent>
  ) {
    console.log(data.arregloAreas)  
  }

  ngOnInit(): void {
  }

  // 新增关闭对话框的方法
  closeDialog(): void {
    this.dialogRef.close();
  }

}

2. 修改模板中的路由按钮，绑定click事件触发关闭方法

<button class="btn btn-primary" 
  [routerLink]="['/vertrabajadores', area]"
  (click)="closeDialog()">
  <span class="fa fa-arrow-right"></span> 
</button>

修改完成后点击按钮会同时触发路由跳转和对话框关闭，跳转后对话框不会再残留。

内容的提问来源于stack exchange，提问作者JavierOrellana7