角2と材料設計 - 例ダイアログが空です

Question

材料設計ページ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 {} 

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

、エラーのために：

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

あなたapp.module.tsダイアログコンポーネント（DialogOverviewExampleDialog）を2箇所に定義する必要があります：declarationsおよびentryComponents。例えば

：

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