Question

场合
用户可以单击<md-slide-toggle>。每当用户将切换从true滑动到false时，都会出现一个对话框，要求用户确认他们的选择。如果用户点击＆＃34;取消＆＃34;，而不是＆＃34;继续＆＃34;，切换应该滑回true（或者，我对解决方案感兴趣在用户遇到对话框之前，切换不会滑动。

问题
当用户选择取消他们的决定时，切换不能与它所约束的模型一起更新。

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>

问题
当我反转isChecked的值时，为什么滑块会恢复到之前的状态？不应该吗？

如果这不是最好的方法，那会是更好的方法吗？

修改：根据请求添加了对话框代码

编辑2 ：我认为我遇到的问题是管理3层组件。我没有上传我的所有代码，但在实际实现中，我有一个管理页面的组件，它使用容器组件来保存幻灯片切换和标签，该标签使用md-slide-toggle 。我试图通过3层管理双向绑定：

PageComponent - ＆gt; ContainerComponent - ＆gt; MdSlideToggleComponent

当我取出中间层时，双向绑定有效。但是，对于3层，每当我在PageComponent上更改isChecked时，它将仅更新ContainerComponent上的更改，并且不会再进行更改。所以我的改变并没有让它一路下滑。可能是人为错误导致整体问题。

Answer 1

您的代码对我来说很好。我没有看到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

Answer 2

另一个解决方案是试试这个：

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

上面发生的事情是我使用模板引用变量来引用幻灯片切换，然后通过为函数checked返回一个布尔值来改变它的onToggle属性，这将是启动一个对话框，以确定返回值是true还是false。

如果用户取消对话框，则重置Md-Slide-Toggle

2 个答案: