angularjs - 将 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

使用 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)
          }
       
    }