MatDialog 未正确显示

Question

我正在尝试使用MatDialog 并基于this example 我已按如下方式实现了该对话框：

import {Component, Inject, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {AuthenticationService} from '../../../service/authentication.service';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  constructor(private router: Router, public dialog: MatDialog) { }

  openDialog(): void {
    const dialogRef = this.dialog.open(CreateGroupDialogComponent);
  }    
}

@Component({
  selector: 'app-create-group-dialog',
  template: `
    <span>Hello World!</span>
  `
})
export class CreateGroupDialogComponent {
  constructor(public dialogRef: MatDialogRef<CreateGroupDialogComponent>) {  }
}

然而，即使当我按下相应的按钮时出现对话框，我得到的却是：

HTML 模板未显示，并且模态框的尺寸错误。

我不明白问题出在哪里。为什么模态没有正确绘制？

这是打开模式时生成的 HTML 代码。可以看出它是空的。

Answer 1

我遇到了这个问题，通过 ngZone.run() 方法解决了。 我正在使用 Angular 13，所以不需要那些 entryComponents

所以我有一个页面可以在回调函数（如反馈表）上打开一个对话框（单独的组件）

但该对话框不会呈现所有与角度相关的组件，而是仅呈现在refund-popup.component.html 和refund-popup 中编写的Html CSS。组件.css

这是因为回调来自角度区域外。所以我只是让我的对话框在区域内运行。

解决方案

import { NgZone} from '@angular/core'
import { MatDialog } from '@angular/material/dialog';
import { RefundPopupComponent } from 'src/app/components/refund-popup/refund-popup.component';



@Component({
selector: 'app-create-profile',
templateUrl: './create-profile.component.html',
styleUrls: ['./create-profile.component.scss'],
})

export class CreateProfileComponent {
   constructor(private zone: NgZone , private dialog: MatDialog) {}
   
   someFunction() {
       this.zone.run(() => this.dialog.open(RefundPopupComponent}))

    }     
}

在包含 ngZone 运行方法之后，我已经更新了前后图像

Answer 2

更新 - 2021 年 4 月

使用 Ivy，解决此问题的方法不再是将您的组件添加到 entryComponents。我遇到了这个问题，更令人困惑的是，它在开发和生产中都可以在本地运行，但在我们部署的环境中却没有。它只是默默地失败了。在将头撞到墙上一整天后，我发现了一个循环依赖项，由于某种原因没有引发错误。删除此依赖项后，一切都会按预期进行。

Answer 3

使用自 9.0 以来的新常春藤编译器，entryComponents 字段不再需要并且已被弃用。

我只是通过重新启动我的ng serve 解决了这个问题。

Answer 4

您需要将其添加到您的@NgModule 上的entryComponents

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { MatDialogModule, MatButtonModule } from '@angular/material';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent, DialogOverviewExampleDialogComponent } from './home/home.component';


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent,
    DialogOverviewExampleDialogComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MatDialogModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    DialogOverviewExampleDialogComponent
  ]
})
export class AppModule { }

Angular2 material dialog has issues - Did you add it to @NgModule.entryComponents?的副本