MdDialog与Angular 4

Question

我正在尝试在Angular 4中使用MdDialog。

Dialog html：

<div style="width: 100%">
    <h2>Dialog</h2>
    <button md-raised-button (click)="dialogRef.close()">Close dialog</button>
</div>

对话框组件：

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

@Component({
    selector: 'your-dialog-selector',
    templateUrl: './dialog.component.html'
})
export class DialogComponent {
    constructor(public dialogRef: MdDialogRef<any>) {
    }
}

调用html：

<md-icon class="demo-dialog-open-button" (click)="open()">
                view_list
            </md-icon>

调用组件功能：

open() {
        this.dialogRef = this.dialog.open(DialogComponent);

        this.dialogRef.afterClosed().subscribe(result => {
            this.dialogRef = null;
        });
    }

app.material.module：

import { NgModule } from '@angular/core';
import {
    MdToolbarModule,
    MdIconModule,
    MdMenuModule,
    MdButtonModule,
    MdSelectModule,
    MdSnackBarModule,
    MdSnackBar,
    MdInputModule,
    MdTooltipModule,
    MdCardModule,
    MdDialogModule
} from '@angular/material';

@NgModule({
    imports: [
        MdToolbarModule,
        MdButtonModule,
        MdIconModule,
        MdMenuModule,
        MdSelectModule,
        MdSnackBarModule,
        MdInputModule,
        MdTooltipModule,
        MdCardModule,
        MdDialogModule
    ],
    exports: [
        MdToolbarModule,
        MdButtonModule,
        MdIconModule,
        MdMenuModule,
        MdSelectModule,
        MdSnackBarModule,
        MdInputModule,
        MdTooltipModule,
        MdCardModule,
        MdDialogModule
    ],
    providers: [
        MdSnackBar
    ]
})
export class AppMaterialModule {}

我遇到的问题是，对话框会在屏幕左侧打开一个垂直空白框。 Inspect元素显示：

<md-dialog-container class="mat-dialog-container ng-tns-c7-4 ng-trigger ng-trigger-slideDialog" role="dialog" style="transform: none; opacity: 1;"><!--bindings={
  "ng-reflect-portal": ""
}--></md-dialog-container>

为什么不显示我的对话框html的内容？

Answer 1

您应该忘记在{NgModule

中添加DialogComponent entryComponents

  entryComponents:[DialogComponent]

检查Plunker !!

希望这会有所帮助!!