Angular 4.x 自定义表单控件-ControlValueAccessor

https://segmentfault.com/a/1190000009070500

https://blog.csdn.net/u011514106/article/details/90694585
https://blog.csdn.net/weixin_33923762/article/details/88122159
https://segmentfault.com/a/1190000018423511

两个地方使用了：
1.mdEditor
2.自定义label选择

// export class BaseInfoLabelSelectComponent implements OnInit,ControlValueAccessor {

@Component({
  selector: 'app-base-info-label-select',
  templateUrl: './base-info-label-select.component.html',
  styleUrls: ['./base-info-label-select.component.scss'],
  providers:[{ // 固定的，useExisting的是当前的组件
    provide:NG_VALUE_ACCESSOR,
    useExisting:forwardRef(()=>BaseInfoLabelSelectComponent),
    multi:true,
  }]
})

export class BaseInfoLabelSelectComponent implements OnInit,ControlValueAccessor {
  constructor() { }
  @Input() labels:any;

  // 固定的
  private _value:any;
  
  set value(value){
    this._value=value;
    this.notifyValueChange();
  }
  get value(){
    return this._value;
  }
  
  writeValue(obj: any): void {
    this._value = obj;
  }
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
  onChange: (value: number) => void = () => null;
  onTouched: () => void = () => null;
  notifyValueChange(): void {
    if (this.onChange) {
      this.onChange(this.value);
    }
  }
  ngOnInit() {
    console.log(this.value); // 取不到
    setTimeout(()=>{
      console.log("22:",this.value); // 取得到值
    },1000)
  }


  // 给表单赋值，就是this.value="sss";
}

获取值的时候：arr；赋值的时候：string。

get selectedLabelList() { // 已经选择的标签和自定义标签列表
  return this.value.split(',').filter(v => !!v);
}
set selectedLabelList(list) {
  this.value = list.join(',');
}