ユーザーがダイアログをキャンセルするとMd-Slide-Toggleをリセットする

Question

状況
ユーザーは<md-slide-toggle>をクリックできます。ユーザーがtrueからfalseにトグルをスライドするたびに、選択を確認するダイアログが表示されます。ユーザーが「続行」とは違って「キャンセル」をクリックすると、トグルはtrueに戻されます（代替として、ユーザーがダイアログに直面する前にトグルがスライドしないソリューションに興味があります）。

問題
ユーザーが彼らの決定を取り消すことを選択した場合、トグルは、それがバインドのモデルと一緒に更新することができません。私はisCheckedの値を反転するとき

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> 

質問
はなぜスライダはそれに戻って戻りません以前の状態です？それじゃない？

これが最良の方法でない場合は、より良い方法はありますか？

編集：要求に応じてダイアログのコードを追加しました

編集2：私は私が持っていた問題は、コンポーネントの3層を管理していたと思います。私はすべてのコードをアップロードしませんでしたが、実際の実装では、スライド・トグルを保持するコンテナ・コンポーネントとmd-slide-toggleを使用するラベルを使用するページを管理するコンポーネントがあります。私は中間層、結合が働いていた2ウェイを取り出したとき> MdSlideToggleComponent

- > ContainerComponent -

PageComponent：私は、2ウェイ3層を貫通して結合を管理しようとしていました。しかし、3つのレイヤーでは、PageComponentでisCheckedを変更するたびにContainerComponentの変更だけを更新し、それ以上は流れません。だから、私の変更は完全にそれを下げていませんでした。全体的な問題を引き起こしたのは人為的ミスであった可能性が高い。

Answer 1

あなたのコードはよかったです。 toggle-sliderが元に戻らない理由は分かりません。ただし、スライダーを切り替える前にユーザーの確認を取得する場合は、イベントを追加してください。(click)="onToggle(); false"

次に、ダイアログを使用してユーザー応答を処理するロジックを追加します。私の例で使用している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

はこれを試してみた：

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

私はスライドを参照するために、テンプレートの参照変数を使用していている何上記起こって

-toggleを指定して、checkedのプロパティにブール値を代入して変更します。関数onToggleによって返されます。返り値がtrueまたはfalse。