angular父子组件的双向绑定参数

一、

父组件中标签引用子组件html:

<app-child [(childValue)]="parentValue"></app-child>

注意：双向，传参写法就必须是‘[(xxxx)]’，“[]”表示是单向输入，子组件仅能接收，不可改变，“()”是单向输出，一般在里面监听子组件output的event。

子组件js:

export class Child {
   @Input()  childValue: string;
   @Output() childValueChange = new EventEmitter<string>();
   
   childChangeTxt() {
     this.childValue= '我被改成了子组件中的内容';
     this.childValueChange.emit(this.childValue);
   }
}

 注意：如果要实现双向，input的这个双向值，必须成对增加一个“output”且命名为“input”的值拼接“Change”，如上示例的就是成对的。并且在最终确认改变时，要emit该“output”的event事件。

达成以上两点，才可以实现双向。

二、重写原生的双向（荐）

@Component({
  selector: 'app-time-picker',
  templateUrl: './time-picker.component.html',
  styleUrls: ['./time-picker.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => TimePickerComponent),
      multi: true,
    },
  ],
})
export class TimePickerComponent implements OnInit, ControlValueAccessor {
  
  incomeValue='';
  disabledTime=false;
  private onTouchedCallback: () => void = () => { };
  private onChangeCallback: (_: any) => void = () => { };
  componentValChange(code) { // 如果当前组件页面的incomeValue是在页面ngModel改变的，那就需要监听ngModelChange事件，并且触发给父组件，告诉这个值变了
    // this.valueChange.emit(code);
    this.onChangeCallback(this.selValue);
  }
  get value(): any {
    // 输出
    return this.incomeValue;
  }
  set value(val: any) { // 当前组件设置值
    this.incomeValue = val;
    this.onChangeCallback(this.incomeValue);
  }
  writeValue(val: any): void { // 父组件写入值
    // console.log('写入',  val);
    this.incomeValue = val;
  }
  setDisabledState?(isDisabled: boolean): void {
    // 监听disabled
    this.disabledTime = isDisabled;
  }
  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  }

}