Je travaille sur une application Angular 6 dans laquelle j'utilise la boîte de dialogue Matériau angulaire
J'ai utilisé this.dialogRef.close (0); ou this.dialogRef.close (0); ou this.dialogRef.close (); mais ça ne marche toujours pas
Je mets mon code ci-dessous
component1.ts
import { Component, OnInit , Inject } from '@angular/core';
import { MatDialog , MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
... ..
.. ..
constructor( private restapi: ServicesService , private dialog: MatDialog , public dialogRef: MatDialogRef<NewRegistrationComponent>,
@Inject(MAT_DIALOG_DATA) public data: any ) {
...
.....
}
user_signup(data) {
let userData = {Email: this.email };
this.restapi.signupUsingSocial(userData).then(
result => {
this.responseData = result;
if (this.responseData.status == 1) {
localStorage.setItem('token', this.responseData.data);
this.dialogRef.close(1);
} else {
alert('give proper input');
}
},
err => {
this.dialogRef.close(0);
}
);}}
component2.ts
let NewRegDialog = this.dialog.open(NewRegistrationComponent, {
width: '750px',
height: '500px',
//disableClose: true,
data: {
email : email,
regType : regType,
},
});
NewRegDialog.afterClosed().subscribe(result => {
if(result == 1){
this.dialogRef.close('signup');
}else{
alert('Login failed') ;
});
4 Réponses :
Vous pouvez fermer la boîte de dialogue du composant où vous avez
let NewRegDialog = this.dialog.open(NewRegistrationComponent, {
Dans votre exemple, component1 a la méthode dialog.open. Pourquoi essayez-vous de fermer dans component2?
Tu peux essayer :
close(){
this.dialogRef.close(true);
}
et dans vos ts:
<div mat-dialog-actions>
<button (click)="close()">close</button>
</div>
C'est this.dialog.closeAll() pas this.dialogRef.close(true); . Voir la documentation de l'API: material.angular.io/components/dialog/api
@ThomasDavidKehoe Cela dépend de ce que le bouton est censé faire, n'est-ce pas? this.dialog.closeAll() fermera toutes les boîtes de dialogue et this.dialogRef.close() fermera que spécifique dialogRef . Certes, je ne vois pas vraiment ce que ce bouton de fermeture a à voir avec la question d'OP, car ils essaient de le fermer par programme.
Vous avez raison, MatDialogRef a une méthode close (), MatDialog a une méthode closeAll (). Je les ai confus.
Vous rencontrez cette erreur car vous ouvrez la boîte de dialogue en dehors de NgZone.
Une solution simple consiste à importer la NgZone dans le constuctor:
constructor(public dialogRef: MatDialogRef<ModalComponent>, private ngZone: NgZone) { }
puis exécutez le code dans NgZone
onNoClick(): void {
this.ngZone.run(() => {
this.dialogRef.close();
});
}
cet article explique ce qu'est une NgZone: https://blog.oughttram.io/angular/2016/02/01/zones-in-angular-2.html
J'ai passé de nombreuses heures là-dedans et ce que j'ai compris, c'est que dans ma fenêtre contextuelle, j'avais un formulaire qui déclenchait une erreur dans le javascript sur la console Chrome. Lorsque j'ai résolu cette erreur de formulaire, ma fenêtre contextuelle a pu se fermer. Ma suggestion pour vous de résoudre cette erreur est que vous pouvez essayer de remplacer le contenu de votre modal par un contenu de base pour tester la fonctionnalité du bouton de fermeture.
Allez sur https://material.angular.io/components/dialog/examples puis sélectionnez l'onglet exemples puis vérifiez le code du premier échantillon dans le bouton <>. Remplacez ensuite le contenu de votre popup par celui de dialog-content-example-dialog.html
Le devrait être résolu maintenant, j'espère que cela fonctionne pour votre
Cordialement,
Juan
Pouvez-vous être plus précis sur le dialogue que vous essayez de fermer? comme je le vois dans votre code, il pourrait y avoir 2 dialogues un dans le composant 2 et un dans le composant 1 comme vous l'avez fait
NewRegDialog.afterClosed().subscribe(result => { if(result == 1){ this.dialogRef.close('signup'); }else{ alert('Login failed') ; });où estthis.dialogRef.close('signup');situé? votre code devrait fonctionner correctement sur lecomponent2et le dialogue devrait se fermer.Les codes semblent corrects. Quelle erreur obtenez vous? Si vous créez une démo stackblitz, il serait plus facile d'obtenir de l'aide.