我需要把这个代码行（angularjs）放在Angular2+中，我该怎么做？
我已经做了一些搜索，但这条线让我困惑。
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)
}
})
}
1条答案
按热度按时间btxsgosb1#
一般来说，如果可以避免使用angular进行jquery，这是一件好事，因为angular处理事情的方式与jq完全不同，而且在许多方面，这两个步骤是相互影响的。这可能很难进行故障排除，并且可能导致越来越难以诊断的问题。
在您的情况下，幸运的是，有一个有Angular 的颜色选择器组件可以替换。
npmjs页面：https://www.npmjs.com/package/ngx-color-picker
演示：https://zefoy.github.io/ngx-color-picker/
lightning 战：https://stackblitz.com/github/zefoy/ngx-color-picker/tree/master
使用npm安装
npm install ngx-color-picker --save然后在app.module.ts```import { ColorPickerModule } from 'ngx-color-picker';
@NgModule({
...
imports: [
...
ColorPickerModule
]
})
<input [(colorPicker)]="color"
[style.background]="color"
(colorPickerChange)="onColorChange($event)" />
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;