Can't find documentation on a cool Angular feature for two-way binding

问题

This is not a question on how to do Angular bindings. It's not about ngModel etc.

It's about a feature that I've just been educated on, seemingly working and quite nicely.

I've never heard of it and I can't confirm it in any documentation I've looked into.

I asked a question and got a few answers, one of which was spot-on and easy to implement.

Basically, it's about the two-way binding that works automagically without implementing ControlValueAccessor nor manually mapping values to the model in the view component from the custom control component. I only had to put in an @Output suffixed by Change in the custom component and banana-box in the view component and tada! it works.

custom.component.ts

@Input() value: string;
@Output() valueChange: EventEmitter<string>;

view.component.html

<app-custom [(value)]="model.someField"></app-custom>
<app-custom [(value)]="model.anotherField"></app-custom>

Where is this behavior documented? Is it some special case of ngModel that I don't comprehend or just a nice feature not widely known?

I'm afraid that it's just a fluke and not something that's going to be supported in the future.

回答1:

This behaviour is proper and documented in angular docs. it is not some "un official hack"

According to docs:

Angular offers a special two-way data binding syntax for this purpose, [()]. The [()] syntax combines the brackets of property binding, [], with the parentheses of event binding, (). The [()] syntax is easy to demonstrate when the element has a settable property called x and a corresponding event named xChange. Here's a SizerComponent that fits this pattern. It has a size value property and a companion sizeChange event:

The official docs even gives an example of it

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-sizer',
  templateUrl: './sizer.component.html',
  styleUrls: ['./sizer.component.css']
})
export class SizerComponent {


  @Input()  size: number | string;
  @Output() sizeChange = new EventEmitter<number>();

  dec() { this.resize(-1); }
  inc() { this.resize(+1); }

  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }

}

so rest assured it is not something which might be removed without any notice.

BUT

just an FYI if you plan on using [ngModel] and (ngModelChange)

回答2:

Two-way bindings (or bananabox) are quite common and a nifty little thing for those dumb/smart component patterns.

https://angular.io/guide/template-syntax#two-way-binding-

Don't worry, it's not going away

来源：https://stackoverflow.com/questions/57552619/cant-find-documentation-on-a-cool-angular-feature-for-two-way-binding