MatDialog无法正确显示 [英] MatDialog not displayed correctly

问题描述

我正在尝试使用MatDialog，并基于此示例已经实现了该对话框，如下所示:

I'm trying to use a MatDialog and based on this example I've implemented that dialog as follows:

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>) {  }
}

但是，即使在按相应按钮时出现对话框，我也得到了以下信息:

However, even though the dialog comes up as I press the according button, what I get it this:

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

The HTML template gets not displayed and the dimensions of the modal is wrong.

我看不出问题所在.为什么模态绘制不正确?

I don't see what the problem is. Why is the modal not correctly drawn?

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

This is the generated HTML code when opening the modal. As can be seen it's empty.

推荐答案

您需要将其添加到@NgModule

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材质对话框的副本有问题-您是否将其添加到@ NgModule.entryComponents?

这篇关于MatDialog无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！