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 - 示例对话框为空

回答

相关问题