Question

在尝试编写自己的自定义窗体控件时，我想出了不同的方法来实现它：使用访问器或仅进行简单绑定（请参见https://stackblitz.com/edit/angular-k7nien）

基本上是访问者自定义控件：

@Component({
  selector: 'accessor',
  template: `
    <input #input
           (input)="onChange($event.target.value)"
           (blur)="onTouched()"
    />
  `,
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: AccessorComponent,
    multi: true
  }]
})
export class AccessorComponent implements ControlValueAccessor {
  @ViewChild('input') input;
  onChange;
  onTouched;

  registerOnChange(fn) {
    this.onChange = fn;
  }

  registerOnTouched(fn) {
    this.onTouched = fn;
  }

  writeValue(value) {
    this.input.nativeElement.value = value;
  }

  setDisabledState(isDisabled) {
    this.input.nativeElement.disabled = isDisabled;
  }

}

和绑定自定义控件：

@Component({
  selector: 'binding',
  template: `
    <input [value]="control.value"
           [disabled]="control.disabled"
           (input)="control.markAsDirty(); control.setValue($event.target.value)"
           (blur)="control.markAsTouched()"
    />
  `
})
export class BindingComponent {
  @Input() control;
}

我想知道它们之间的区别。特别是我是否还在绑定自定义控件中编写异步代码？访问器自定义控件是同步的吗？以及何时使用其中一个？

Answer 1

绑定是用于HTML的声明性编程，而accesor方法则用于其他对象。

说明性的HTML 组件

class BindClass {
    @Input() bind : any;
}

在POO范式下由其他对象使用

组件

@Component({selector:'bind', ...})
class BindClass implements OnInit {
   @Input() bind: any

    ngOnInit() {
       this.bind.name = 'name';
    }
}

HTML

<bind [bind]="othercomponent"></bind>

其他组件

@Component({selector: 'othercomponent', ...})
export class OtherComponent {
    private _name: string;
    set name(name:string) {
        this._name = name;
    }
}

Angular中绑定控件和访问者控件之间的区别？

1 个答案: