Question

我正在以角度进行模态应用。我从角度官方网站复制代码，但这不起作用我的系统。这个代码完全在plunker工作。请提前告诉我错误。

我的app.module.ts文件就是这个。

＆＃13;

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

＆＃13;

我的app.component文件就是这个。

＆＃13;

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();
  }

}

＆＃13;

请让我知道问题出在哪里。

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

Answer 2

如果直接从“ ng add @ angular / material”中添加依赖项，请确保停止运行的应用程序并重新编译angular应用程序，这将使最近添加的依赖项可用。

无法解析MatDialogRef的所有参数：（？，？，？，？）

2 个答案: