重置Md-Slide-Toggle如果用戶取消對話框

情況
用戶可以單擊<md-slide-toggle>。無論用戶何時將開關從true滑動到false，都應出現一個對話框，要求用戶確認其選擇。如果用戶點擊「取消」，而不是「繼續」，則切換應該滑回true（或者，我希望在用戶面對對話之前切換不滑動的解決方案感興趣）。重置Md-Slide-Toggle如果用戶取消對話框

問題
當用戶選擇取消他們的決定，切換失敗，它綁定到模型一起更新。

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>

問題
爲什麼不會滑塊恢復到之前的狀態，當我倒置的isChecked值？不應該嗎？

如果這不是最好的辦法，那麼更好的方法是什麼？

編輯：根據要求

編輯2的對話框添加的代碼：我想我是有這個問題是與管理組件的3層。我沒有上傳我的所有代碼，但在實際實現中，我有一個組件來管理頁面，該頁面使用容器組件來保存滑動切換和使用md-slide切換的標籤。我試圖管理2路通過3層結合：

PageComponent - >的ContainerComponent - > MdSlideToggleComponent

當我拿出了中間層，雙向綁定工作。但是，使用3層，無論何時我會更改PageComponent上的isChecked，它只會更新ContainerComponent上的更改，並且不會再繼續下去。所以我的變化並沒有完全消失。這可能是造成整體問題的人爲錯誤。

來源

2017-06-21 Nyro7

你的代碼對我來說很不錯。我看不到toggle-slider不能恢復原因。但是，如果要在切換滑塊之前獲得用戶確認，可以通過添加click事件來完成：(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

來源

2017-06-21 19:30:11 Nehal

另一種解決方案發現試試這個：

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

什麼上面發生的事情是我使用的模板引用變量來指滑動 - 然後通過爲其分配布爾值來改變它的checked屬性，由函數onToggle返回，該函數將啓動對話以確定返回值是否爲true或false。

來源

2017-06-22 12:46:27 Nyro7

重置Md-Slide-Toggle如果用戶取消對話框

回答

相關問題