角 - [（ngModel）]對[ngModel]對（ngModel）

我目前明白[(ngModel)]="expression"是雙向從組件綁定，以查看，反之亦然。我也明白，[ngModel]="expression"是單向綁定（我相信從組件查看？）。然後有可能(ngModel)="expression"。我主要是困惑，[ngModel] VS (ngModel)之間的差異。有人能解釋一下嗎？角 - [（ngModel）]對[ngModel]對（ngModel）

編輯：與玩弄，並審查通過@Rohan Fating給出的文檔片段後，我意識到，像(ngModel)應該採取一個聲明，而不是表達。話雖如此，是否會有適當的時間來使用像(ngModel)之類的東西，或者甚至會在任何情況下工作？

來源

2017-09-08 mbucks

它的單向綁定去其他方式 – Plog

嘿，有什麼不清楚[我的回答]（https://stackoverflow.com/a/46123215/2545680）？ –

不知道，謝謝你的解釋。這正是我想知道的！ – mbucks

此語法：

[(ngModel)]="expression"

是由編譯器解開成

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

這意味着：

有施加到元件（輸入）一個ngModel指令
通過ngModel結合本ngModel指令採用的expression參數
有一個輸出（事件）ngModelChanged

現在你可以看到[ngModel]部分總是有它，你會注意到同步值下降。

當您指定(ngModel)="c()"時會發生什麼很有趣。通常，(...)語法適用於事件。因此，我們確實角度識別出這事件，並創建在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)將沒有副作用並且是沒有意義的。

來源

2017-09-08 19:15:30

在角[(是信令雙向數據綁定。理論上你只能綁定到一個事件（(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; 
    } 

}

來源

2017-09-08 16:21:07

那麼'（ngModel）'會被認爲是一個事件綁定？意思是用戶輸入的數據，我想讀取他們輸入的內容？而如果我使用'[ngModel]'，我只想改變用戶看到的值，但它們不能影響該值？ – mbucks

添加了屏幕快照，你可以參考這個鏈接angular.io ::: https://angular.io/guide/template-syntax#binding-syntax-an-overview –

經過測試出'（ngModel）=「表達式」「我意識到它不會將輸入值添加到我的組件中的模型中。這是因爲'ngModel'不被視爲一個事件？ – mbucks

[（ngModel）]是雙向綁定（NgModel）是一種方式結合以部件 [ngModel]是查看單程結合成分

來源

2017-09-08 16:34:14

我編輯了我上面的問題。我嘗試使用'（ngModel）=「exampleObj.foo」'，但意識到它不像我期望的那樣綁定到組件上的對象。 – mbucks

角 - [（ngModel）]對[ngModel]對（ngModel）

回答

相關問題