Angular 2和Material Designs - 示例對話框爲空

我正在嘗試創建一個對話框，如材料設計頁面Here中所示。我可以讓按鈕顯示出來，點擊它，對話框出現並且頁面如預期變暗，但沒有文字出現。我覺得我很接近，但我無法弄清楚我要去哪裏錯了。任何幫助表示讚賞，謝謝！Angular 2和Material Designs - 示例對話框爲空

這裏是我的代碼：

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

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

    constructor(public dialog: MdDialog) { } 

    openDialog() { 
    this.dialog.open(DialogOverviewExampleDialog); 
    } 

    ngOnInit() { 
    } 

} 


@Component({ 
    selector: 'dialog-overview-example-dialog', 
    templateUrl: './dialog-overview-example-dialog.html', 
}) 
export class DialogOverviewExampleDialog {}

來源

2017-03-15 gv0000

你得到一個錯誤的控制檯？因爲沒有構造函數，所以你在'DialogOverviewComponent'中也缺少'dialogRef'依賴項。 –

是的。它說，找不到名稱爲'DialogOverviewExampleDialog'。）和找不到DialogOverviewExampleDialog的組件工廠。你把它添加到@ NgModule.entryComponents？即使它在那裏。你能解釋一下dialogRef的含義嗎？稍後會在文檔中提到它，但它不在示例代碼中。 – gv0000

如果我嘗試使用DialogOverviewExampleDialogComponent也給出了一個錯誤，「沒有爲DialogOverviewExampleDialog找到組件工廠，是否將它添加到@ NgModule.entryComponents？」 – gv0000

看起來你可能會丟失在嘗試一些事情。

首先在你的代碼，一定要包括MdDialogRef在DialogOverviewExampleDialog類的構造函數，像這樣，每documentation：

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

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

    constructor(public dialog: MdDialog) {} 

    openDialog() { 
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog); 

    // If you need a result from your dialog 
    dialogRef.afterClosed().subscribe(result => { 
     // Do something with result, if needed. 
    }); 
    } 
} 


@Component({ 
    selector: 'dialog-overview-example-dialog', 
    templateUrl: './dialog-overview-example-dialog.html', 
}) 
export class DialogOverviewExampleDialog { 

    // Added Constructor 
    constructor(public dialogRef: MdDialogRef<DialogOverviewExampleDialog>) {} 
}

其次，對於錯誤：

No component factory found for DialogOverviewExampleDialog. Did you add it to @NgModule.entryComponents?

你app.module.ts必須定義你的對話框組件（DialogOverviewExampleDialog）兩個地方：declarations和entryComponents。

例如：

@NgModule({ 
    declarations: [ 
    HomeComponent, 
    DialogOverviewExampleDialog // HERE 
    ], 
    entryComponents: [ 
    DialogOverviewExampleDialog // AND HERE 
    ], 
    ...

來源

2017-03-15 18:17:31

對於現在重命名的MatDialog基本上是一樣的 - 如果它是空的，最有可能錯過了'entryComponents'條目。 –

Angular 2和Material Designs - 示例對話框爲空

回答

相關問題