Lorsque j'ai coché la bascule de la diapositive, elle devrait fonctionner comme prévu. Mais lorsque j'essaye de le décocher, il y a une fenêtre de confirmation vous demandant si vous êtes sûr. Lorsque je clique sur Annuler dans cette fenêtre de confirmation, la bascule passe toujours à non cochée, ce qui ne devrait pas se produire. Il doit rester dans le même état.
Voici mon code Html et TS
// ts
change(e) {
if(this.checked) {
if(confirm("Are you sure")) {
console.log("toggle")
}
else {
e.stopPropagation();
console.log("toggle should not change if I click the cancel button")
}
}
}
Code TS:
// html
<mat-slide-toggle
(change)="change($event)" [checked]="isChecked()" >
To-pay
</mat-slide-toggle>
lorsque la fenêtre de confirmation apparaît en essayant de décocher le bouton à bascule et que je clique sur l'option d'annulation là-bas, rien ne devrait arriver à la bascule. stopPropagation () ne fonctionne pas non plus.
Edit1 : J'ai essayé de faire return false dans une instruction else. n'a pas fonctionné. Même essayé de changer le e.checked = false. Cela a juste changé la valeur de l'objet événement mais n'a pas empêché la bascule de glisser
4 Réponses :
Je pense que le problème est que le (change) = "eventHandler ()" se déclenchera APRÈS le changement de valeur, tandis que le (ngModelChange) = "eventHandler ()" se déclenchera AVANT le changement de valeur
Malheureusement, vous ne pouvez pas utiliser stopPropagation avec mat-slide-toggle , vous devrez redéfinir par programme la valeur cochée sur true sur le événement dans votre autre condition.
else {
e.source.checked = true;
console.log("toggle should not change if I click the cancel button")
}
Stackblitz
https://stackblitz.com/edit/angular-79yf7m?embed=1&file=app/slide-toggle-overview-example .ts
ça a marché. Merci. «source» était ce qui manquait dans mes essais.
J'utilisais MatDialog comme fenêtre de confirmation et j'ai remarqué le comportement suivant:
lorsque MatDialog est ouvert, la bascule de la diapositive de tapis s'affiche comme une valeur false / décochée , même si l'utilisateur n'a pas pris de décision: 
Démo : https://stackblitz.com/ edit / angular-79yf7m-4gdxbu? file = app / slide-toggle-overview-example.ts
C'est parce que l'événement change se déclenche après la valeur de mat-slide-toggle change.
Pour résoudre ce problème, nous devons réinitialiser la valeur à sa valeur précédente ( true code >) immédiatement après le déclenchement de l'événement change , laissez l'utilisateur décider, et s'il confirme l'action, nous mettrons à jour la valeur en conséquence.
Le code serait:
change(e) {
if (this.checked) {
// at first, reset to the previous value
// so that the user could not see that the mat-slide-toggle has really changed
e.source.checked = true;
const dialogRef = this.dialog.open(ConfirmDialogComponent);
dialogRef.afterClosed().subscribe(response => {
if (response) {
this.checked = !this.checked;
}
})
} else {
this.checked = !this.checked;
}
}
Démo : https://stackblitz.com/edit/angular-79yf7m-yzwwc7?file=app%2Fslide-toggle-overview-example.ts p>
Vous pouvez empêcher le mécanisme de basculement en écoutant l'événement click, puis event.preventDefault () / event.stopImmediatePropagation (). Ensuite, ouvrez votre boîte de dialogue et en fonction de la sélection de l'utilisateur, vous activez ou non la bascule: toggleReference.toggle ().
Inutile de le redéfinir sur true.
écouter l'événement click ne suffit pas car mat-slide-toggle peut également être basculé par des mouvements de glissement.
Qu'en est-il d'un "return false" au lieu de stopPropagation?
Je l'ai essayé. n'a pas fonctionné
Est-ce que "this.checked" est vrai lorsque vous passez dans cette méthode sans cocher? Peut-être que le problème est que vous devez "autre chose" sur le premier si et pas sur le second ...
ya this.checked est vrai quand j'essaye de décocher. si this.checked est faux, il ne doit pas entrer le code d'affichage de la fenêtre de confirmation
Quelle version d'Angular utilisez-vous?
J'utilise angular 5
Pouvez-vous créer une démo pour reproduire un problème?