但

Question

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

这是关于我刚刚受过教育的一项功能，看似有效并且很好。

我从未听说过它，也无法在我研究过的任何文档中对其进行确认。

我问了a question并得到了一些答案，one of which是现场的，易于实施。

基本上，这是一种双向绑定，这种双向绑定可以自动实现而无需实现ControlValueAccessor，也无需从自定义控件组件将值手动映射到视图组件中的模型。我只需要在自定义组件中放入@Output后缀 Change ，在视图组件和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的某些特殊情况，还是只是一个鲜为人知的好功能？

恐怕这只是a幸，将来不会得到支持。

Answer 1

此行为是正确的，并记录在angular docs中。这不是“联合国的官方黑客”

根据文档：

Angular为此提供了一种特殊的双向数据绑定语法， [（）]。 [（）]语法结合了属性绑定的括号[]，加上事件绑定的括号（）。当元素具有可设置的元素时，[[）]语法很容易演示名为x的属性和名为xChange的相应事件。这是一个适合此模式的SizerComponent。它具有大小值属性以及伴随的sizeChange事件：

官方文档甚至给出了一个例子

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

}

请放心，这不是在没有任何通知的情况下可以删除的内容。

如果您打算使用[ngModel]和(ngModelChange)

，

但

只是一个FYI

Answer 2

双向绑定（或bananabox）非常普遍，对于那些笨拙/智能的组件模式来说，这是一件很漂亮的事情。

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

别担心，它不会消失

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

2 个答案:

但