web-dev-qa-db-fra.com

Aucun fournisseur pour MatDialogRef

J'utilise matériel 2 version 2.0.0-beta.12. Je dois ajuster la position du matériau Modal. J'ai suivi cette réponse pour le faire. https://stackoverflow.com/a/44238699/8253445 Comme MdDialog n'est plus disponible, j'ai utilisé {MatDialog, MatDialogRef, MAT_DIALOG_DATA}.

constructor(public dialog: MatDialog,public dialModRef:MatDialogRef<any>) {}

Lorsque j'ajoute MatDialogRef à mon constructeur, l'erreur "Aucun fournisseur pour MatDialogRef" est générée. S'il vous plaît pouvez-vous m'aider à comprendre cela?

dialog-overview-example.ts

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

@Component({
   selector: 'dialog-overview-example',
   templateUrl: 'dialog-overview-example.html'
})
export class DialogOverviewExample {

   animal: string;
   name: string;

   constructor(public dialog: MatDialog,public 
   dialModRef:MatDialogRef<any>) {}

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

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

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

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

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

}

app.module.ts

entryComponents: [DialogOverviewExample,DialogOverviewExampleDialog]

dialog-overview-example-dialog.html

<h1 md-dialog-title>Hi {{data.name}}</h1>
<div md-dialog-content>
  <p>What's your favorite animal?</p>
  <md-form-field>
    <input mdInput tabindex="1" [(ngModel)]="data.animal">
  </md-form-field>
</div>
<div md-dialog-actions>
  <button md-button tabindex="2">Ok</button>
  <button md-button (click)="onNoClick()" tabindex="-1">No Thanks</button>
</div>
angularangular-material2
16
kashif roshen

Vous obtiendrez cela exactement

Aucun fournisseur pour MatDialogRef

erreur si vous incluez le sélecteur html de votre boîte de dialogue dans dialog-overview-example.html comme <dialog-overview-example-dialog></dialog-overview-example-dialog>

Cela n’est pas nécessaire, n’incluez nulle part le sélecteur HTML du composant de dialogue.

21
Javier Aviles

Vous devez importer ce module dans votre fichier de module (app.module.ts Par défaut):

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

et ajoutez MatDialogModule à imports dans votre déclaration de module:

@NgModule({
  declarations: [...],
  imports: [
    ...
    MatDialogModule,
    ...
  ],
  providers: [...],
  entryComponents: [...],
  bootstrap: [...]
})

EDIT:

Vous devez transmettre des données via this.dialogRef.close(); pour que result dans subscribe fonctionne. Par exemple:

@Component({
   selector: 'dialog-overview-example-dialog',
   templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {
someValue: boolean = false;

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

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

}
16
Piotr Pliszko

Le problème est que vous incluez votre <dialog-component></dialog-component> dans votre code quelque part ainsi que l’injecter dans votre vue avec @Inject. Si vous retirez votre <dialog-component></dialog-component> de quel que soit le fichier template.html dans lequel vous l’avez trouvé, cela fonctionnera!

5
Clayton Constant

Supprimez MatDialogRef du composant DialogOverviewExample. Vous n'en avez pas besoin ici. Cela devrait fonctionner alors.

2
Scharlo

Mise à jour de septembre 2019

La plupart des exemples de matériaux angulaires affichent le MatDialogRef importé sous:

import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';

Cela provoquera l'erreur suivante (par exemple, lors de la création d'un service pour encapsuler la création de composants de boîte de dialogue):

ERROR NullInjectorError: StaticInjectorError(AppModule)[DialogComponent -> MatDialogRef]: 
  StaticInjectorError(Platform: core)[DialogWarningComponent -> MatDialogRef]: 
    NullInjectorError: No provider for MatDialogRef!

Importation correcte: '@ angular/material'

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

material.module.ts

Cette erreur se produira également si Angular Material module utilise l’import from '@angular/material/dialog'. Recommandez de structurer le module Matériau comme suit:

import { NgModule } from '@angular/core';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';

import {
  MatAutocompleteModule,
  MatBadgeModule,
  ...
  MatDialogModule,
  ...
} from '@angular/material';

@NgModule({
  exports: [
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    ScrollDispatchModule,

    MatAutocompleteModule,
    MatBadgeModule,
    ...
    MatDialogModule,
    ...
  ]
})
export class MyMaterialModule { }
0
Christopher Peisert