Angular 2 和 Material Designs - 示例对话框为空答案

【问题标题】：Angular 2 and Material Designs - Example Dialog is emptyAngular 2 和 Material Designs - 示例对话框为空
【发布时间】：2017-08-06 12:09:42
【问题描述】：

我正在尝试创建一个对话框，如 Material Designs 页面Here 所示。我可以让按钮显示，单击它，对话框显示并且页面按预期变暗，但没有文本显示。我觉得我很接近，但我不知道我哪里出错了。任何帮助表示赞赏，谢谢！

这是我的代码：

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

【问题讨论】：

您是否在控制台中遇到错误？由于您没有构造函数，因此您还缺少 DialogOverviewComponent 中的 dialogRef 依赖项。
是的。它说找不到名称“DialogOverviewExampleDialog”。）并且没有为 DialogOverviewExampleDialog 找到组件工厂。你把它添加到@NgModule.entryComponents 了吗？即使它在那里。你能解释一下你所说的 dialogRef 是什么意思吗？稍后在文档中会提到它，但它不在示例代码中。
如果我尝试 DialogOverviewExampleDialogComponent 也会出现错误，“没有为 DialogOverviewExampleDialog 找到组件工厂。您是否将其添加到 @NgModule.entryComponents？”

标签： angular dialog modal-dialog material-design

【解决方案1】：

看起来您在尝试中可能遗漏了一些东西。

首先在您的代码中，确保在您的DialogOverviewExampleDialog 类构造函数中包含MdDialogRef，就像这样，根据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>) {}
}

其次，对于错误：

找不到 DialogOverviewExampleDialog 的组件工厂。你是否将其添加到@NgModule.entryComponents？

您的app.module.ts 必须在两个地方定义您的对话框组件 (DialogOverviewExampleDialog)：declarations 和 entryComponents。

例如：

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

【讨论】：

现在重命名的 MatDialog 基本上也是如此 - 如果它是空的，您很可能错过了 entryComponents 条目。
如果其他人遇到同样的问题，如果您将selector 设置为dialog，您将获得空内容。将其命名为其他任何内容：github.com/angular/material2/issues/8601
@asgaines 太好了，我看到了你的评论！