MdDialog與角4

Question

我想在角4

對話框HTML中使用MdDialog：

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

我遇到的問題是，該對話框打開，如垂直空白框在屏幕的左側。檢查元素顯示此：

<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

entryComponents:[DialogComponent] 

入住這Plunker添加DialogComponent爲entryComponents！

希望這有助於！