将AngularJS迁移到Angular 8

Question

我需要把这个代码行(angularJS(放在angular 2+中，我该怎么做？

我已经做了一些搜索，但这条线让我困惑。

scope.variable.value=event.color.toHex((

旧代码：

function callColorpicker() {
var colorpicker = $('.colorpicker')
colorpicker.colorpicker().on('changeColor', function(event) {

var scope = angular.element(this).scope()
scope.variable.value = event.color.toHex()
if ($scope.autoapplysass) {
$scope.autoApplySass()
}
})
}

新代码：

callColorpicker() {
var colorpicker = $('.colorpicker')
colorpicker.colorpicker();
var _this = this;
colorpicker.colorpicker().on('changeColor', function(event) {

--> scope.variable.value = event.color.toHex()
if (_this.applySass) {
_this.applySass(false)
}
})     
}

Answer 1

一般来说，如果您可以避免使用Angular进行jQuery，这是一件好事，因为Angular处理事情的方式与JQ完全不同，而且在许多方面，这两种方式会相互影响。这可能很难进行故障排除，并且可能会导致越来越难以诊断的问题。

在您的情况下，幸运的是，有一个有角度的颜色选择器组件可以替换。

• NPMJS页面：https://www.npmjs.com/package/ngx-color-picker
• 演示：https://zefoy.github.io/ngx-color-picker/
• StackBlitz：https://stackblitz.com/github/zefoy/ngx-color-picker/tree/master

使用npmnpm install ngx-color-picker --save安装

然后在app.module.ts中

import { ColorPickerModule } from 'ngx-color-picker';
@NgModule({
...
imports: [
...
ColorPickerModule
]
})

在您的HTML 中

<input [(colorPicker)]="color" 
[style.background]="color"
(colorPickerChange)="onColorChange($event)"   />

以及在您的组件中。ts

import { Component, ViewContainerRef } from '@angular/core';
import { ColorPickerService, Cmyk } from 'ngx-color-picker';
constructor(public vcRef: ViewContainerRef, private cpService: ColorPickerService) {}
export class AppComponent {
color: string;
onColorChange(newColor) {

this.color = newColor;
if (_this.applySass) {
_this.applySass(false)
}

}