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

你需要将它添加到entryComponents您@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 { } 

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