2017-09-30 10 views
0

角度材質ダイアログでエラーが発生します。appコンポーネントへのダイアログ入力によりエラーが発生する

ダイアログボックスからの入力が必要な場合は、アプリケーションのコンポーネントに送信して処理してください。私は、角度材料のドキュメントサイトをチェックし、これを試みたが、以下に示すように、コンソールでのいくつかのエラーを得た:

Error can be seen here

ERROR: Error: No provider for MdDialog!

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import 'hammerjs'; 
import { AppComponent } from './app.component'; 
import { DialogComponent } from './dialog/dialog.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    DialogComponent 
    ], 
    imports: [ 
    BrowserModule 
    ], 
    entryComponents:[DialogComponent], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

dialog.component.ts

import { Component, OnInit, Inject } from '@angular/core'; 
import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material'; 

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

    constructor(private dialog:MdDialogRef<DialogComponent>, @Inject(MD_DIALOG_DATA) public data:any) { } 

    ngOnInit() { 
    } 

    close(){ 
    this.dialog.close('close'); 
    } 

} 

app.component.ts

import { Component } from '@angular/core'; 
import { MdDialog } from '@angular/material'; 
import { DialogComponent } from './dialog/dialog.component'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app'; 

    constructor(private dialog: MdDialog){} 

opendialog() : void{ 
    let dialog = this.dialog.open(DialogComponent,{ 
    width: '500px', 
    data: 'Hi How are you' 
    }); 

    dialog.afterClosed().subscribe((result)=> console.log(result)); 
} 

} 

app.component.html

<button (click)="opendialog()">Popup</button> 

dialog.component.html

<p> 
    dialog works! 
</p> 

<button (click)="close()" md-button>Close</button> 

答えて

0

は、あなたはそれが実際に `MdDialogModule`という名前だ

+0

あなたNgModuleの輸入配列にDialogModuleを配置する必要があります。 – Edric

+0

そして今は 'MatDialogModule'と呼ばれています:) – Splaktar

関連する問題