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

Question

我目前明白[(ngModel)]="expression"是從組件到視圖的雙向綁定，反之亦然。 我也明白[ngModel]="expression"是單向綁定（我相信從組件到視圖？）。 然后有(ngModel)="expression"的可能性。 我對[ngModel] vs (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確實將此識別為事件並在組件視圖工廠中創建適當的偵聽器：

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]是單向綁定組件來查看