单击按钮后如何关闭材质对话框

Question

这是我的对话代码：

<ul class="list-group">
            <li class="list-group-item" *ngFor="let area of data.arregloAreas[data.index].listo">
                <button class="btn btn-primary" [routerLink]="['/vertrabajadores', area]"><span class="fa fa-arrow-right"></span> </button> {{area | titlecase}}
            </li>
            <li class="list-group-item" style="color: red;" *ngIf="data.arregloAreas[data.index].listo.length == 0">
                No existen áreas completas
            </li>
        </ul>

一切正常，我可以毫无问题地导航。但是当它改变页面时，对话框仍然存在于页面上，所以我必须点击外部才能关闭它。我的想法是当我单击包含 routerLink 的按钮时，立即关闭对话框。

我想我可以在导航按钮中放置一个（单击）方法，但我不知道有什么方法可以关闭对话框。

编辑：dialog.ts 的代码

import { Component, OnInit, Inject } from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material/dialog';

@Component({
  selector: 'app-dashboarddialog',
  templateUrl: './dashboarddialog.component.html',
  styleUrls: ['./dashboarddialog.component.css']
})
export class DashboarddialogComponent implements OnInit {

  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
    console.log(data.arregloAreas)  
  }

  ngOnInit(): void {
  }

  

}

Answer 1

import { Component, OnInit, Inject } from '@angular/core';
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 {

  constructor(
    private dialogRef: MatDialogRef,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    console.log(data.arregloAreas)  
  }

  ngOnInit(): void {
  }

  closeModal() {
    this.dialogRef.close();
  }
}

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