MatDialog 不显示

Question

我想在我的应用程序中添加一个对话框，但由于某种原因它没有显示。

对话框组件：

import { Component, OnInit } from '@angular/core';
import {MatDialogRef} from "@angular/material";

@Component({
  selector: 'app-connect-to-player-dialog',
  templateUrl: './connect-to-player-dialog.component.html',
  styleUrls: ['./connect-to-player-dialog.component.css']
})
export class ConnectToPlayerDialogComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

使用的方法：

connectToPlayer() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;

    this.dialog.open(ConnectToPlayerDialogComponent, dialogConfig);
  }

我还将对话框添加到entryComponents：

entryComponents: [ConnectToPlayerDialogComponent]

我不知道可能缺少什么...感谢您的帮助！

完整代码：

import {Component, OnInit} from '@angular/core';
import {PLAYERS} from '../mock-players';
import {Router} from "@angular/router";
import {AlertService, AuthenticationService} from "../_services";
import {HttpClient} from "@angular/common/http";
import {AuthGuard} from "../_guards";
import {MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material';
import {ConnectToPlayerDialogComponent} from "../connect-to-player-dialog/connect-to-player-dialog.component";

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

  players = PLAYERS;
  c: MatDialogRef<ConnectToPlayerDialogComponent>;

  constructor(private autheGuard: AuthGuard,
              private authenticationService: AuthenticationService,
              private alertService: AlertService,
              private http: HttpClient,
              private router: Router,
              private dialog: MatDialog) {
  }

  ngOnInit() {
    this.loadPlayers();
    this.connectToPlayer();
  }

  loadPlayers() {

    this.authenticationService.loadPlayersForPlayer(this.autheGuard.getUser().identityStr)
      .subscribe(
        data => {
          this.players = data;
          this.players.unshift(this.autheGuard.getUser());
          //if (data.identityStr) {
            //localStorage.setItem('currentUser', JSON.stringify(data));
            //PdHeaderComponent.updateUserStatus.next(true);
            //this.router.navigate(['']);
         // } else {

          //}
          // this.alertService.success('Successfully logged in');
        },
        error => {
          let errormsg: string = 'Unexspected Error occured.';
          if (error.code == 401) {
            errormsg = 'Wrong Playername or Password.';
          }
          this.alertService.error(errormsg);
        });
  }

  connectToPlayer() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;

    this.c = this.dialog.open(ConnectToPlayerDialogComponent, {
      width: '400px'});
  }

}

模板：

<p>
  connect-to-player-dialog works!
</p>

例外：

ERROR Error: Found the synthetic listener @slideDialog.start. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
    at checkNoSyntheticProp (platform-browser.js:2991)
    at DefaultDomRenderer2.listen (platform-browser.js:2975)
    at DebugRenderer2.listen (core.js:15124)
    at listenToElementOutputs (core.js:10307)
    at createViewNodes (core.js:13416)
    at createRootView (core.js:13339)
    at callWithDebugContext (core.js:14740)
    at Object.debugCreateRootView [as createRootView] (core.js:14041)
    at ComponentFactory_.create (core.js:10960)
    at ComponentFactoryBoundToModule.create (core.js:3922)

Answer 1

正如聊天中提到的：缺少 BrowserAnimationsModule 的导入

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  // ...
  imports: [BrowserAnimationsModule],
  // ...
})

Answer 2

这可能会有所帮助：

• 确保您在组件中注入了public dialog: MatDialog
• 在对话组件中注入public dialogRef: MatDialogRef<DialogOverviewExampleDialog>, @Inject(MAT_DIALOG_DATA) public data: any
• 而不是 new Config 尝试作为第二个参数传递来打开方法 this 并检查它是否在工作 { width: '250px' }