Material Design Slide Toggle 没有 event.StopPropagation,我应该用啥?

Posted

技术标签:

【中文标题】Material Design Slide Toggle 没有 event.StopPropagation,我应该用啥?【英文标题】:Material Design Slide Toggle does not have event.StopPropagation, what should I use?Material Design Slide Toggle 没有 event.StopPropagation,我应该用什么? 【发布时间】:2017-08-31 12:46:13 【问题描述】:

Material Design 中的 Slide Toggle 没有 stopPropagation 事件,因为“MdSlideToggle.prototype._onChangeEvent”已经调用了 stopPropagation。我应该改用什么?

<md-slide-toggle (change)="changeToggle($event, activityType.isActive)" checked="activityType.isActive" value="activityType.activityTypeId" mdTooltip="!!activityType.isActive ? 'Active' : 'Inactive'" mdTooltipPosition="left"></md-slide-toggle>


public changeToggle(event: MdSlideToggleChange, originalValue)
    if (this.hasChange && event.checked !== originalValue)
        event.stopPropagation();
        //Results in error: [ts] Property 'stopPropagation' does not exist on type 'MdSlideToggleChange'.
     else 
        this.hasChange = !this.hasChange;
    

我可以使用常规事件,但会出现“event.stopPropagation 不是函数”的异常。

目前,我将该行更改为:

event.source.checked = !event.checked;

event.preventDefault 也是如此。我需要要求用户保存更改,然后再更改页面上的另一个值,因为“业务需求”。

只是将“checked”的值改回原来的值,是正确的做法吗?有没有更好的方法来做到这一点?

【问题讨论】:

【参考方案1】:

"我需要要求用户保存更改,然后再更改 页面上的另一个值”

我知道这不是主题,但这与您的“业务需求”有关 如果您说用户必须按下单独的按钮才能确认 mat-slide-toggle 的值,那么您不应该使用 mat-slide-toggle。 您应该使用复选框。

mat-slide-toggles 适用于 1-off 操作,打开或关闭灯,而不是询问您是否要打开或关闭灯。 它是一个行动,而不是一个问题。

复选框更适合提问。

【讨论】:

我完全同意你所说的。如果我没记错的话,我被产品负责人否决了。

以上是关于Material Design Slide Toggle 没有 event.StopPropagation,我应该用啥?的主要内容,如果未能解决你的问题,请参考以下文章

mat-slide-toggle Angular Material 以编程方式切换

如何更改 Angular Material mat-slide-toggle 属性?

Angular Material Slide Toggle 不改变绑定变量

Android Material Design-Creating Apps with Material Design(用 Material Design设计App)-(零)

bootstrap-material-design-个人总结

Material Design学习笔记