Acabo de descubrir que hay varias formas de implementar un enlace bidireccional en un componente personalizado. Lo que no puedo entender es la diferencia entre ellos. ¿Cuándo debería preferir usar un componente que use banana en una sintaxis de cuadro (con @input() y @Output() para el modelo), para implementar un enlace bidireccional como este componente?

 @Component({ selector: 'app-first-component', template: ` <p>input model value: {{ inputModel }}</p> <button (click)="clickHandler()">Clear</button> ` }) export class FirstComponentComponent { @Input() inputModel: string; @Output() inputModelChange = new EventEmitter<string> (); clickHandler(): void { this.inputModel = ''; this.inputModelChange.emit(this.inputModel); } }

y uno que implementa ControlValuAccessor así

 @Component({ selector: 'app-second-component', template: ` <p>input model value: {{ inputModel }}</p> <button (click)="clickHandler()">Clear</button> `, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SecondComponentComponent), multi: true }] }) export class SecondComponentComponent implements ControlValueAccessor { private inputModel: string; private onChanged: (value: string) => void = () => {}; clickHandler(): void { this.inputModel = ''; this.onChanged(this.inputModel); } registerOnChange(fn: any): void { this.onChanged = fn; } writeValue(value: string) { this.inputModel = value; this.onChanged(this.inputModel); } registerOnTouched(): void {/* ignored */} }

Se usan en un componente principal como este

 <app-first-component [(inputModel)]="value"> </app-first-component> <app-second-component [(ngModel)]="value"> </app-second-component>

Como puede ver, se usan de la misma manera y también hacen el mismo trabajo. Si es así, ¿por qué hay ControlValueAccessor ? ¿Hay algo que pueda hacer con el segundo componente que no sea factible con el primero?