javascript - Angular：访问器不进行双向绑定

Question

我正在尝试为具有关联标签的输入编写访问器组件，但我不确定我是否正确执行此操作。当我尝试进行双向绑定时，即使在 class 中设置了值，也不会在输入字段中设置该值MyComponent。

为什么我的双向绑定不起作用？我希望看到Something Special里面<input>就是里面<third-party-input>。但是，输入为空。

当单独使用<third-party-input>时，双向绑定在那里工作，只是当我将组件包裹在它周围时。

主要部件

<ui-input [(ngModel)]="myValue"></ui-input> 

export class MyComponent {
  public myValue = 'Something Special';
}

带标签组件的输入

<label>{{label}}</label>
<third-party-input [(ngModel)]="value"></third-party-input>

@Component({
  selector: 'ui-input',
  templateUrl: './input.component.html',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => InputComponent),
    multi: true
  }]
})
export class InputComponent extends AccessorComponent {}

@Component({
  selector: 'app-accessor',
  template: ''
})
export abstract class AccessorComponent implements ControlValueAccessor {
  protected _value: any;

  public get value() {
    return this._value;
  }

  public set value(val) {
    this._value = val;
    this.onChange(val);
    this.onTouched();
  }

  protected onChange = (_: any) => { };
  protected onTouched: any = () => { };

  public registerOnChange(fn: (_: any) => void): void {
    this.onChange = fn;
  }

  public registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  public writeValue(value: any): void {
    if (value !== undefined) {
      this._value = value;
    }
  }
}

标签： javascriptangulartypescript