找不到有关双向绑定的酷 Angular 功能的文档

Question

这是不是关于如何进行Angular绑定的问题。这与 ngModel 等无关

这是关于我刚刚学习的一项功能，看起来工作正常而且非常好。

我从未听说过它，也无法在我调查过的任何文档中证实它。

我问的 and got a few answers, 很准确并且易于实施。

基本上，它是关于自动工作的双向绑定，无需实施 ControlValueAccessor，也无需手动将值从自定义控件组件映射到视图组件中的模型。我只需要在自定义组件中放入一个后缀为 Change 的 @Output 并在视图组件中放入一个 banana-box 和 tada！它有效。

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>

此行为记录在何处？是我不理解的 ngModel 的一些特殊情况，还是只是一个不为人知的好功能？

怕是侥幸而已，以后不会支持了

Answer 1

双向绑定（或 bananabox）很常见，对于那些 dumb/smart 组件模式来说是一件漂亮的小事。

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

别担心，它不会消失

Answer 2

此行为是正确的，并记录在 angular docs 中。这不是一些 "un official hack"

根据文档：

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:

官方文档还给出了例子

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);
  }

}

所以请放心，它不会在没有任何通知的情况下被删除。

BUT

如果您计划使用 [ngModel] 和 (ngModelChange)

，则只需一个 FYI

找不到有关双向绑定的酷 Angular 功能的文档

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

code-documentation

typescript

angular

two-way-binding

BUT