angular - 无法解析 MatDialogRef : (? 的所有参数，？，？，？)

Question

我正在做一个 Angular 模态应用程序。我从 Angular 官方网站复制了代码，但这在我的系统中不起作用。这段代码在 plunker 中完美运行。请告诉我错误提前谢谢。

我的 app.module.ts 文件是这样的。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatFormFieldModule } from '@angular/material';
import { MatInputModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { AppComponent, DialogOverviewExampleDialog } from './app.component';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { MatDialog, MatDialogRef } from '@angular/material';
@NgModule({
  declarations: [
    AppComponent,
    
  ],
  imports: [
    BrowserModule,
    MatFormFieldModule,
    MatInputModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    HttpModule,
  ],
  providers: [MatDialogRef],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的 app.component 文件是这样的。

import { Component } from '@angular/core';
import { Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  animal: string;
  name: string;
  dialogRef: any;
  constructor(public dialog: MatDialog) { }

  openDialog(): void {
    this.dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal }
    });

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

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: './modal.component.html',
})
export class DialogOverviewExampleDialog {

  constructor(public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,@Inject(MAT_DIALOG_DATA) public data: any) { }

  onNoClick(): void {
    this.dialogRef.close();
  }

}

请告诉我问题出在哪里。

Answer 1

您需要将 DialogOverviewExampleDialog 添加到 declarations 和 entryComponents ( entry components )。

import { MatDialogModule } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
    DialogOverviewExampleDialog
  ],
  entryComponents: [
    DialogOverviewExampleDialog,
  ],
  imports: [
    BrowserModule,
    MatFormFieldModule,
    MatInputModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    HttpModule,
    MatDialogModule,
 ],
 providers: [MatDialogRef],
 bootstrap: [AppComponent]
})
export class AppModule { }