当被 JavaScript 更改时，Angular 无法通过 [(ngModel)] 获取输入值

Question

我创建了一个自定义输入 formControl，所以我需要通过 [(ngModel)] 获取/设置它的值：

import { Component, Injector, OnInit, forwardRef } from '@angular/core';
import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, FormGroup } from '@angular/forms';

@Component({
    selector: 'time-picker',
    template:
        `<input type="text" class="clockpicker" [formControl]="selectedTime" />`,
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => TimePickerComponent),
        multi: true,
    }]
})

export class TimePickerComponent implements OnInit, ControlValueAccessor {
    
    selectedTime = new FormControl('');

    constructor() { }

    ngAfterViewInit() {
        this.scriptLoader.load(
            'assets/clockpicker/clockpicker.js'
        );
    }
 
    writeValue(obj: any): void {
        if (this.selectedTime) {
            this.selectedTime.setValue(obj);
        }
    }

    registerOnChange(fn: any): void {
        this.selectedTime.valueChanges.subscribe(fn);
    }

    registerOnTouched(fn: any): void {
        this.onTouched = fn;
    }

}

如您所见，我已经加载了一个名为 clockpicker.js 的 JavaScript 第三方。 （它只是一个简单的时钟选择器），这里是它的代码：

$(document).ready(function () {
    $('.clockpicker').each(function (index, element) {
        $(element).clockpicker({
            afterDone: function () {
                $(element).find('input[type="text"]').change();
            }
        });
    });
});

这是我的问题：

当我直接输入此输入时，我可以通过[(ngModel)] 获取插入的值，但是正如您所看到的，当 jQuery 函数填充输入值时，我无法通过[(ngModel)] 获取填充的值。 我知道这是因为即使我使用它也无法在 Angular 生命周期中触发 registerOnChange 事件

$(element).find('input[type="text"]').change();

什么都没有发生。

Answer 1

Angular 无法知道在其区域之外发生的更改。这意味着您应该告诉您的 Angular 应用程序需要运行更改检测周期以查看是否有任何内容需要更新。

在您的情况下，您应该在组件内初始化 clock-picker 并使用 ChangeDetectorRef 检测更改。请阅读更多关于 NgZone 的信息，这对于执行 Angular 区域之外的操作很有用。

可能有用：

• Angular 3rd party library interaction
• Understanding Angular's Change Detection
• Never again be confused when implementing ControlValueAccessor in Angular forms