0

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

这样做的原因是我的eval组件中有动态 javascript（来自 Google Blockly）正在运行 ()。

这是组件模板：

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

}

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

IE：

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

我已经尝试在“区域内”执行代码，认为这将使 Angular 保持最新：

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

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

4

2 回答 2

0

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

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

于 2020-09-04T14:29:40.290 回答
0

很难猜出你能做什么/不能做什么，但你可以尝试添加一个 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
});
于 2020-09-04T14:55:47.287 回答