将 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)
          }
       
    }