Angular - [（ngModel）] vs [ngModel] vs（ngModel）

Question

我目前了解[(ngModel)]="expression"是从组件到视图的双向绑定，反之亦然。我也明白[ngModel]="expression"是单向绑定（我相信从组件到视图？）。然后有(ngModel)="expression"的可能性。我对[ngModel]与(ngModel)之间的差异感到困惑。有人可以解释一下吗？

编辑：在阅读了@Rohan Fating提供的文档片段之后，我意识到像(ngModel)这样的东西应该采用声明而不是表达式。话虽如此，是否有适当的时间来使用像(ngModel)这样的东西，或者甚至可以在任何情况下使用？

Answer 1

此语法：

[(ngModel)]="expression"

由编译器解包到

中

[ngModel]="expression" (ngModelChanged)="expression=$event"

表示：

1. 有一个应用于元素（输入）的ngModel指令
2. 此ngModel指令通过ngModel绑定获取expression参数
3. 有输出（事件）ngModelChanged

现在您可以看到[ngModel]部分始终存在，如您所述，它会同步值。

指定(ngModel)="c()"时会发生什么有趣。通常，(...)语法用于事件。因此，Angular确实将此视为事件并在component view factory中创建适当的侦听器：

function (_v, en, $event) {
    var ad = true;
    var _co = _v.component;
    ...
    if (('ngModel' === en)) {
        var pd_4 = (_co.c() !== false);
        ad = (pd_4 && ad);
    }
    return ad;
}

但是，所有(...)元素也会被解析为属性，因此它将匹配ngModel指令选择器：

selector: '[ngModel]:not([formControlName]):not([formControl])'

因此Angular也会将ngModel指令类初始化为指令。但是，由于它没有通过[...]语法定义的任何输入绑定，因此在更改检测期间将跳过此指令。由于事件ngModel也没有为ngModel指令定义，因此使用(ngModel)将没有任何副作用且无意义。

Answer 2

Angular中的

[(表示双向数据绑定。从理论上讲，您只能绑定到事件（(ngModel)）或值（[ngModel]）。这使您能够以不同于即将发生的更改的方式处理更改。使用Angular 2，您可以获得灵活性。

你需要ngModelChange事件和更新值，就像我在下面做的那样

Plunker链接：https://plnkr.co/edit/RZMgM69doSHGBG1l16Qf?p=preview

@Component({
  selector: 'my-app',
  template: `
    <div>
    <input [ngModel]='value' (ngModelChange)='setModel($event)'/>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  value: string = '';
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  setModel(value) {
    this.value = value;
  }

}

Answer 3

[（ngModel）]是双向绑定 （NgModel）是组件的单向绑定视图 [ngModel]是查看

的单向绑定组件