Réinitialiser Md-Slide-bascule si l'utilisateur annule dialogue

Question

Situation
L'utilisateur peut cliquer sur un <md-slide-toggle>. Chaque fois que l'utilisateur glisse la bascule de true à false, une boîte de dialogue devrait apparaître demandant à l'utilisateur de confirmer son choix. Si l'utilisateur clique sur "Annuler", par opposition à "Continuer", la bascule devrait revenir à true (sinon, je serais intéressé par une solution où la bascule ne glisse pas avant que l'utilisateur ne soit confronté à la boîte de dialogue).

Problème
Lorsque l'utilisateur choisit d'annuler sa décision, la bascule ne parvient pas à mettre à jour à côté du modèle, il est lié.

TS

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'toggle-parent', 
    templateUrl: 'toggle-parent.component.html' 
}) 

export class ToggleParentComponent { 
    @Input() isChecked: boolean; 

    onToggle(): void { 
     WL.SimpleDialog.show('title', 'text', 
       [ 
        {text: 'Cancel', handler:() => this.toggleReset()}, 
        {text: 'Continue'} 
       ];) 
    } 

    toggleReset(): void { 
     this.isChecked = !this.isChecked; 
    } 
} 

HTML

<md-slide-toggle 
    [(ngModel)]="isChecked" 
    (change)="onToggle()"> 
</md-slide-toggle> 

Question
Pourquoi ne le curseur revenir à son état précédent quand j'inverser la valeur de isChecked ? Ça ne devrait pas?

Si ce n'est pas la meilleure façon de procéder, quelle serait la meilleure approche?

Modifier: Ajout de code pour dialogue sur demande

Edit 2: Je pense que la question que je faisais était de gérer 3 couches de composants. Je n'ai pas téléchargé tout mon code, mais dans l'implémentation réelle, j'ai un composant pour gérer une page, qui utilise un composant conteneur pour contenir la bascule et une étiquette, qui utilise la commande md-slide-toggle. Je tentais de gérer 2 voies de liaison à travers 3 couches:

PageComponent -> ContainerComponent -> MdSlideToggleComponent

Quand je pris la couche intermédiaire, dans les deux sens liaison a fonctionné. Cependant, avec 3 couches, chaque fois que je changerais isChecked sur PageComponent, cela mettrait à jour le changement sur ContainerComponent seulement et il ne descendrait pas plus loin. Donc, mes changements ne l'ont pas fait complètement baisser. C'était probablement l'erreur humaine qui a produit le problème global.

Answer 1

Votre code me semble bon. Je ne vois pas de raison pour toggle-slider de ne pas revenir en arrière. Mais, si vous voulez obtenir la confirmation de l'utilisateur avant de basculer le curseur, vous pouvez le faire en ajoutant un événement click: (click)="onToggle(); false"

Ensuite, ajoutez une logique pour gérer la réponse de l'utilisateur à partir de la boîte de dialogue.Mon exemple utilise md-dialog

openDialog() { 
     let dialogRef = this.dialog.open(DialogResultExampleDialog); 
     dialogRef.afterClosed().subscribe(result => { 
     console.log(result); 
     if(result === "continue"){ 
      this.toggleReset(); 
     } 
     }); 
    } 

Plnkr demo

Answer 2

Une autre solution trouvée était d'essayer ceci:

<md-slide-toggle 
    [(ngModel)]="isChecked 
    (change)="slider._checked=onToggle()" 
    #slider> 
</md-slide-toggle> 

Ce qui se passe au-dessus est que je suis en utilisant une variable de référence de modèle pour se référer à la diapositive -toggle, puis en modifiant sa propriété checked en lui affectant un booléen, renvoyé par la fonction onToggle, qui lancera une boîte de dialogue pour déterminer si la valeur de retour sera true ou false.