角度2和材质设计 - 示例对话框为空

Question

我试图创建一个对话框如图所示的材料设计页面在这里.我可以显示按钮,单击它,对话框显示,页面按预期变暗但没有文本显示.我觉得我很接近,但我无法弄清楚我哪里出错了.任何帮助表示赞赏,谢谢!

这是我的代码:

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

Answer 1

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

首先在你的代码中,确保MdDialogRef在你的DialogOverviewExampleDialog类构造函数中包含这样的文档:

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
  ],
  ...