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 cannot call detectChanges() of undefined（因为 ChangeDetectorRef 被注入到组件构造函数中并且库不知道它）。

任何想法如何从库中检索颜色十六进制值到我的 Angular 组件中？

标签： javascriptangularcolor-picker

Answer 1

iro.js 没有在 ngZone 中运行，注入它并使用它来运行您的函数以使更改检测正常工作：

constructor(private ngZone: NgZone) {}

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