angular - Kan inte lösa alla parametrar för MatDialogRef: (?, ?, ?, ?)

Jag gör en modalapplikation i Angular. Jag kopierade kod från Angularts officiella webbplats men detta fungerar inte på mitt system. Denna kod fungerar perfekt i Plunker. Vänligen berätta felet, tack på förhand.

Min fil app.module.ts är denna.

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

Min app.component-fil är denna.

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

}

Var snäll och låt mig veta var problemet uppstår.

Svar #1

Du behöver lägga till DialogOverviewExampleDialog i declarations och entryComponents (ingångskomponenter).

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

Svar #2

Om du lägger till beroenden direkt från "ng add @angular/material", se till att du stoppar den körande applikationen och kompilerar om Angular-applikationen, vilket gör att de nyligen tillagda beroendena blir tillgängliga.

Relaterade artiklar