AngularJS代码行scope.variable.value迁移至Angular 8的实现方法咨询

Angular 2+ 已废弃AngularJS中通过DOM元素获取关联作用域的API，组件类实例本身就对应原逻辑的作用域上下文，按以下步骤修改即可：

1. 首先在当前Angular组件类的属性定义段，提前声明和原逻辑对应的variable属性，示例如下：

// 和你代码里的applySass属性同级定义
variable = {
  value: '' // 初始值可按业务实际需求调整
};

2. 将你标注的待迁移代码行直接替换为：

_this.variable.value = event.color.toHex();

注意事项 #

• 由于jQuery的事件回调默认运行在Angular变更检测区域外，如果你修改属性后出现页面视图没有同步更新的问题，可以通过注入NgZone解决：
  第一步在组件构造器中注入NgZone：

  import { NgZone } from '@angular/core';
  
  @Component({/* 你的组件配置 */})
  export class YourComponent {
    constructor(private ngZone: NgZone) {}
    // 其他属性和方法
  }
  

  第二步将回调内的逻辑包裹在ngZone.run中，触发Angular变更检测：

  callColorpicker() {
    const colorpicker = $('.colorpicker');
    const _this = this;
    // 原重复初始化的colorpicker()调用可删除，直接绑定事件即可
    colorpicker.colorpicker().on('changeColor', function(event) {
      _this.ngZone.run(() => {
        _this.variable.value = event.color.toHex();
        if (_this.applySass) {
          _this.applySass(false);
        }
      });
    });
  }
  

• 额外优化提示：当前代码依赖jQuery实现颜色选择器不符合Angular开发规范，你可以直接使用Angular生态原生适配的颜色选择器组件，可以避免上下文绑定、变更检测相关的适配问题。

内容的提问来源于stack exchange，提问作者Hugo Silva