监视由jQuery内部组件完成的变量更改

问题描述

我知道这不是最佳选择，但是我有常规的javascript代码来更改组件中属性的变量。

之所以这样做，是因为我的组件中正在运行动态JavaScript（来自Google Blockly）（eval）。

这是组件模板：

<input #textInput
   [attr.max-value]="maxValue"
   type="number"
   style="width: 495px;"
   (change)="onChange($event)"
   [id]="key"
   class="form-control"
   [disabled]="disabled"
   value="{{value}}" />

以及组件代码：

export class NumberStepComponent extends BaseStepComponent {
    /** number-step ctor */
    constructor() {
        super();
    }

    @ViewChild("textInput") textInput: ElementRef;

    private _maxValue: string;
    get maxValue(): string {
        return this._maxValue;
    }

    set maxValue(val: string) {
        this._maxValue = val;
        console.log("Changed ** : " + val);
    }

}

当我从Angular更改maxValue时，确实触发了设置器代码。但是当jQuery执行此操作时，不会触发该设置器。

即：

var code = `$('#ID').attr('max-value',"5")`;
eval(code);

我尝试执行“在区域中”的代码，以为这将使Angular保持最新状态：

this.ngzone.run(() => {
    var code = `$('#ID').attr('max-value',"5")`;
    eval(code);
});

也不会触发设置器。有什么方法可以做到这一点？

解决方法

您不应使用$('#ID').attr('max-value',"5")，因为该值是绑定的（因此由Angular处理）。

如果要更改值，请更新模型（this.maxValue ='5'），而不要更新视图。 Angular将为您更新视图。

,

很难猜测您可以/不能做什么，但是您可以尝试添加MutationObserver。例如：

const node = document.querySelector('.some-element') // or this.textInput.nativeElement;

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => console.log(mutation));
});

observer.observe(node,{
  attributes: true,childList: true,characterData: true
});