javascript - Angular 8 从外部库中检索值

Question

我有一个 Angular 8 应用程序，我已经导入了 iro.js库到我的项目中。

它是一个 JavaScript 颜色选择器库。

用法非常基本:

我已经更新了 angular.json 中的脚本

"scripts": 
[
    "node_modules/@jaames/iro/dist/iro.js"
]

然后如下使用库

declare var iro: any;
   .
   .
   .
ngOnInit() {
    this.colorPicker = new iro.ColorPicker('#color-picker-container');
    this.colorPicker.on('color:change', this.onColorChange);
}

onColorChange(color, changes) {
    this.selectedColor = color.hexString;
    console.log(this.selectedColor);
}

即使打印出该值，该值实际上并没有改变。

我有一个 div 元素使用这个变量来显示颜色，但它没有改变。

<div class="color-value" [style.background-color]="selectedColor"></div>

我也试过调用 ChangeDetectorRef.detectChanges() 方法，但它说 iro.js 不能调用未定义的 detectChanges()(因为 ChangeDetectorRef 被注入(inject)在组件构造函数中，库不知道它)。

关于如何将颜色十六进制值从库中检索到我的 Angular 组件中有什么想法吗？

Answer 1

iro.js 没有在 ngZone 中运行，注入(inject)它并使用它来运行你的函数来改变检测正常工作:

constructor(private ngZone: NgZone) {}

this.colorPicker.on('color:change', (color, changes) =>  this.ngZone.run(() => this.onColorChange(color, changes)));