如何解决将 AngularJS 迁移到 Angular 8
我需要将此代码行(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)
}
})
}
解决方法
一般来说,如果你能在 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
使用 npm npm 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)" />
在你的 component.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)
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。