Question

我正在尝试使用Angular 2的材质模块中的@property。我有一个组件，我试图使用如下所示的对话框：

MdDialog

对话框组件如下所示：

import { Component, OnInit } from '@angular/core';

import { Aircraft } from '../shared/aircraft';
import { AircraftService } from '../shared/aircraft.service';
import { MdDialog, MdDialogRef } from '@angular/material';
import { NewAircraftDialogComponent } from '../new-aircraft-dialog/new-aircraft-dialog.component';

@Component({
  selector: 'app-statusboard',
  templateUrl: './statusboard.component.html',
  styleUrls: ['./statusboard.component.css']
})
export class StatusboardComponent implements OnInit {
  aircrafts: Aircraft[] = [];

  constructor(private aircraftService: AircraftService,
              public dialog: MdDialog) { }

  ngOnInit(): void {
    this.aircraftService.getAircrafts()
      .then(aircrafts => this.aircrafts = aircrafts);
  }

  openNewAircraftDialog(): void {
    let dialogRef = this.dialog.open(NewAircraftDialogComponent, {
      width: '300px'
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }
}

但我在控制台中收到错误：

错误：未捕获（在承诺中）：错误：没有MdDialog的提供者！

在线查看，它会将import { Component, OnInit } from '@angular/core'; import { Aircraft } from '../shared/aircraft'; import { AircraftService } from '../shared/aircraft.service'; import { MdDialogRef } from '@angular/material'; @Component({ selector: 'app-new-aircraft-dialog', templateUrl: './new-aircraft-dialog.component.html', styleUrls: ['./new-aircraft-dialog.component.css'] }) export class NewAircraftDialogComponent implements OnInit { newAircraft: Aircraft; constructor(private aircraftService: AircraftService, public dialogRef: MdDialogRef<NewAircraftDialogComponent>) { } ngOnInit() { } onSubmitClick(): void { this.dialogRef.close(); } onCloseClick(): void { this.dialogRef.close(); } }添加到"entryComponents: [NewAircraftDialogComponent]"。我做了，但那还没有解决问题。

Answer 1

我找到了答案。

我已将MdDialog和MdDialogRef导入到我的组件中，但我没有导入MdDialogModule。我在MdDialogModule导入中添加了app.module.ts，一切正常！

相关问答： Angular EXCEPTION: No provider for Http

Answer 2

在module.ts中添加它从'@ angular / material'导入{MdDialogModule};

@NgModule（{ 声明：[ “ “ “]，进口：[ “ “ ] 提供者：[ MdDialogModule ]}

add this in module.ts
import	{MdDialogModule} from '@angular/material';

@NgModule({
 declarations: [
'
'
'],
    imports: [
'
'
],
 providers: [
        MdDialogModule
    ]}

没有提供MdDialog错误

2 个答案: