材料对话框不关闭

Question

如果重要的话，我有一个由导航组件启动的材料，但问题是我正在使用对话框登录，当登录成功并且用户被重定向到dashboard.html时它似乎没有关闭/p>

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>