时间戳

首页 > 解决方案 > 在 Angular 中确定“组件值的变化”是否是检测到的变化的结果

angular - 在 Angular 中确定“组件值的变化”是否是检测到的变化的结果

问题描述

我们正在使用 DevExtreme 的“开关”组件，并设置了onValueChanged该组件的事件以执行某些操作。

但是，这也会在绑定对象的属性值发生更改时触发（作为更新基础数据的结果）。

但我们只想在用户更改开关值时执行该操作。

那么如何检测更改是否是 ChangeDetection 更新的结果呢？

html代码：

<dx-form [formData]="myobject" [colCount]="6">
  <dxi-item dataField="myobjectprop" editorType="dxSwitch" [editorOptions]="{ value:myobject.myobjectprop, onValueChanged:someaction }" cssClass="switch-right-label">
    <dxo-label text="my property" location="right" alignment="left">
    </dxo-label>
  </dxi-item>
</dx-form>

ts代码

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-test-my-object',
  templateUrl: './test-my-object.component.html',
  styleUrls: ['./test-my-object.component.scss']
})
export class TestMyObjectComponent implements OnInit {

  myobject: MyObject;
  onObjectChanged: BehaviorSubject<MyObject>;

  constructor() { 
    this.onObjectChanged = new BehaviorSubject(new MyObject());
  }

  ngOnInit(): void {
    this.onObjectChanged
      .subscribe(newmyobject => {
        this.myobject = newmyobject;
      });
  }

  someaction = (): Promise<boolean> => {
    // Do something when the data changed
    // - but not when change is a result of using using 'changeObject' <= how to know that???
    return new Promise((resolve, reject) => { /*...*/ });
  }

  changeObject(): void {
    const obj = new MyObject();
    obj.myobjectprop = !this.myobject.myobjectprop;
    this.onObjectChanged.next(obj);
  }  
}

export class MyObject {
  myobjectprop: boolean;
}

标签： angularangular-changedetection

解决方案

终于找到了解决方案（至少在使用 DevExteme 组件时）。

基本上需要检查，event通过事件处理程序传递的事件对象的属性是否已设置（或未设置）。

例子：

someaction = (e): Promise<boolean> => {
  if (e.event === undefined) {
    // event was triggered by code
    return Promise.resolve(false);
  }
  return new Promise((resolve, reject) => { /*...*/ });
}

推荐阅读