对应用程序组件的对话框输入会导致错误

Question

我在角度材质对话框中出错。

我想从对话框中输入一些内容并将其发送到应用程序的组件以进行进一步处理。我检查了角度材料文档站点并尝试了这个，但在控制台中出现了一些错误，如下所示：

  

错误：错误：没有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>

Answer 1

您必须将DialogModule放入NgModule的导入数组