在 Angular 中确定 'change in value for a component' 是否是检测到的更改的结果

Determine in Angular whether a 'change in value for a component' is a result of a detected change

我们正在使用 DevExtreme 的 'switch' 组件,并已设置该组件的 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-code

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;
}

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

基本上需要检查,是否设置(或未设置)事件对象的 event 属性 是否已设置(或未设置)。

示例:

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