Как закрыть диалоговое окно "Материал" после нажатия кнопки

#javascript #angular #typescript #angular-material

Вопрос:

Это код моего диалога :

 <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>

Все работает нормально, я могу ориентироваться без проблем. Но когда он изменяет страницу, диалоговое окно сохраняется на странице, поэтому мне приходится щелкнуть снаружи, чтобы закрыть его. Моя идея заключается в том, что, когда я нажимаю кнопку, содержащую ссылку на маршрут, немедленно закройте диалоговое окно.

Я думаю, что могу поместить метод (щелчок) в кнопку навигации, но я не знаю никакого способа закрыть диалоговое окно.

ИЗМЕНИТЬ: код диалога.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 {
  }

  

}

Ответ №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>