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

先上效果图

1、安装插件

npm install ngx-color-picker --save

2、配置插件

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

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

3、使用

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

2、使用定义公共组件

A: html文件

B: ts文件

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