ngx-color-picker angular4封装颜色选择器组件

先上效果图

1、安装插件

npm install ngx-color-picker --save

2、配置插件

import { ColorPickerModule } from 'ngx-color-picker';

@NgModule({
  ...
  imports: [
    ...
    ColorPickerModule
  ]
})

3、使用

<input [(colorPicker)]="color" [style.background]="color"/>

4、过多细节，不再啰嗦，参考下面两个网址，我们主要展示封装组件实例。

https://github.com/zefoy/ngx-color-picker
https://zefoy.github.io/ngx-color-picker/

---

封装颜色选择组件步骤
1、定义组件

A: select-color.component.ts

import { Component, Output, Input, EventEmitter } from "@angular/core";
@Component({
    selector: "select-color",
    templateUrl: "./select-color.component.html"
})
export class SelectColorComponent {
    // 初始化颜色是从父组件中传递过来的，属性
    @Input() color: string;
    // 选择颜色以后调用父组件中的方法，将数据传递出去，方法
    @Output() sentColor = new EventEmitter();

    // 当选择颜色以后
    colorPickerChangeFun() {
        this.sentColor.emit(this.color);
    }

}

B: select-color.component.html

<input type="text" [value]="color" disabled/>
<input 
    [style.background]="color" 
    [(colorPicker)]="color" 
    (colorPickerChange)="colorPickerChangeFun()" 
    [cpPresetColors]="['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']"
    readonly 
    style="width: 15px; height: 15px; border: none; cursor: pointer;" 
    title="单机选择颜色" 
/>

<!--支持修改色值-->
<input [value]="color" [(colorPicker)]="color" [cpPresetColors]="['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']"
/>
<input style="width: 16px; border: none;" [style.background]="color" [(colorPicker)]="color" [cpPresetColors]="['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']"
/>

2、使用定义公共组件

A: html文件

<!-- 
  [color]: 初始化颜色
  [sentColor]: 子模块中发射获取颜色的方法
 -->
<select-color [color]="initColor" (sentColor)="getChangeColor($event)"></select-color>

B: ts文件

export class AppComponent {
   // 初始化颜色
  public initColor: string = "#468dcc";
    // 获取颜色的方法Ï
  getChangeColor(event) {
    console.log(event);
  }
}