颜色选择器捕获数据

Question

我正在实施这个颜色选择器： https://github.com/Alberplz/angular2-color-picker

它有一个HTML示例：

<input [(colorPicker)]="color" 
       [style.background]="color"
       [cpOKButton]="true"
       (click)="saveColor(color)"
       (colorPickerChange)="onChangeColor(color)"
       [cpPresetColors]="['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']"/>

它有一个选项[cpOKButton] =“true”，可以显示或隐藏按钮。 我不明白括号的含义。

我想要实现的是当用户点击按钮，通过该功能传递颜色并添加到数组时。

有没有办法可以使用node_module中的相同功能？ 如果我查看函数文件：https://github.com/Alberplz/angular2-color-picker/blob/master/src/color-picker.directive.ts 我看到用户有一个函数oKColor（）

这也是我的组件

export class ColorSelectorComponent  {

    private color: string = "rgb(236,64,64)";
    private color2: string = "rgb(236,64,64)";
    private color3: string = "rgb(236,64,64)";
    private color4: string = "rgb(236,64,64)";
    private color5: string = "rgba(45,208,45,1)";
    private color6: string = "#1973c0";
    private color7: string = "#f200bd";

    private arrayColors: any = {};
    private selectedColor: string = 'color';

    constructor(private cpService: ColorPickerService) {

        console.log(this.arrayColors);
        this.arrayColors['color'] = '#2883e9';
        this.arrayColors['color2'] = '#e920e9';
        this.arrayColors['color3'] = 'rgb(255,245,0)';
        this.arrayColors['color4'] = 'rgb(236,64,64)';
        this.arrayColors['color5'] = 'rgba(45,208,45,1)';
    }
   onChangeColor(color: string) {
        console.log(color);
    }

    addColor(event){
        console.log(event);
    }

    saveColor(a) {
    console.log(a);
        }

}

Answer 1

当我们检查对话框是否打开时，我会使用cpToggleChange事件。如果是，那么我们可以在oKColor初始化后覆盖DialogComponent方法。 它可能看起来像这样：

查看

<input ... (cpToggleChange)="toggle($event)"/>

<强>组件

@ViewChild(ColorPickerDirective) colorPicker: ColorPickerDirective;

saveColor() {
  this.colors.push(this.color);
}

dialog: any;

toggle(value) {
  if(value && !this.dialog) {
    this.dialog = (this.colorPicker as any).dialog;
    const originOkClick = this.dialog.oKColor;
    const that = this; // it's required in this case
    this.dialog.oKColor = function() { // monkey patching okColor methos
      that.saveColor();
      return originOkClick.apply(this, arguments);
    }
  }
}

ngOnDestroy() {
  if(this.dialog) {
    this.dialog = null;
  }
}

<强> Plunker Example

Answer 2

您可以尝试使用此代码（我将参数color更改为$event）：

<input [(colorPicker)]="color" 
       [style.background]="color"
       [cpOKButton]="true"
       (click)="saveColor($event)"
       (colorPickerChange)="onChangeColor($event)"
       [cpPresetColors]="['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']"/>