Диалог материалов не закрывается

Question

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

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import { AngularFireAuth } from "@angular/fire/auth";
import { AuthService } from "../../core/services/auth.service";
import { User, PrivateUser } from "../../core/models/user";
import { UserService } from "../../core/services/user.service";
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { SignUpComponent } from '../../components/authentication/sign-up/sign-up.component';
import { SignInComponent } from '../../components/authentication/sign-in/sign-in.component';


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

  isLoggedIn$: Observable<boolean>;
  isLoggedOut$: Observable<boolean>;
  user$: Observable<any>;

  constructor(
    public afAuth: AngularFireAuth,
    private authService: AuthService,
    private userService: UserService,
    public dialog: MatDialog,
    public dialogRef: MatDialogRef<SignInComponent>
    ) { }

  ngOnInit() {
    this.dialogRef.close();
    this.isLoggedIn$ = this.afAuth.authState.pipe(map(user => !!user));
    this.isLoggedOut$ = this.isLoggedIn$.pipe(map(loggedIn => !loggedIn));
    this.user$ = this.authService.user$;
  }

вот мой код в dashboard.ts

Таким образом, он должен запускать закрытие диалогового окна в тот момент, когда он достигает страницы компонента. но это не закрывает диалоговое окно, и панель не может быть отображена. Я тоже не получаю никаких ошибок консоли, поэтому я не совсем уверен, что пошло не так. Я также пробовал позвонитьthis.dialog.closeAll; где он загружает панель управления, но диалог все еще не закрывается.

и здесь сработал компонент SignInComponent

  loginModal() {
    this.dialog.open(SignInComponent)
 };
}

на моем HTML

<form [formGroup]="loginForm" (ngSubmit)="SignIn(email.value, password.value)">
  <mat-form-field>
    <input formControlName="email" name="email" matInput type="text" placeholder="email">
  </mat-form-field>
  <mat-form-field>
    <input formControlName="password" name="password" matInput type="password" placeholder="Password">
  </mat-form-field>
  <div *ngIf="errorCode" class="notification is-danger">
    Email and password does not match
  </div>
  <div class="d-flex flex-column align-items-center">
    <button mat-raised-button  class="button is-success w-100" type="submit" [disabled]="!loginForm.valid">
      Continue
    </button>
  </div>
</form>

Answer 1

Добавить mat-dialog-close к вашей кнопке закрытия.

<mat-dialog-actions>
  <button mat-button mat-dialog-close>No</button>
  <!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
  <button mat-button [mat-dialog-close]="true">Yes</button>
</mat-dialog-actions>