AngularJs 2.0內置組件 - 如何正確使用它們

Angular 2提供了許多內置組件。如NgIf，NgFor，NgStyle，NgNonBindable ....一些組件用的 '*' 所使用的，如* ngIf和* ngFor：AngularJs 2.0內置組件 - 如何正確使用它們

<div *ngFor="item of items"> 
    {{item}} 
</div>

其中一些人與所用 '[]'如[ngStyle]和[ngClass]：（？分量視頻輸入）

<div [ngStyle]="{'background-color': 'yellow'}">Content</div>

和一些使用像 '角1'：例如：

<div ngNonBindable> 
    Angular code snippet: {{content}} 
</div>

有誰知道這裏爲什麼？有什麼區別？我如何記住正確使用它們的方式？

的可能的複製[是什麼在Angular2括號，括號和星號之間的差異？]（http://stackoverflow.com/questions/35944749 /是什麼 - 是最差括號，括號 - 和星號功能於angular2間） –

Angular 2指令會導致某些類型的DOM更改，如ngIf對於有條件添加/移除的塊或ngFor - 對於重複的塊，會標以星號「*」。

ngStyle和ngClass與「[]」一起使用，因爲這會導致one way data binding具有傳遞值的元素的所需屬性。

像ngNonBindable這樣的一些指令用於Angular 1風格，因爲它們的使用不需要數據綁定，以便在框語法「[（）]」中使用「[]」或香蕉包圍它們（雙向數據綁定），但爲Angular核心提供關於當前元素的信息。

2016-03-16 21:09:13

只是爲了好玩，這些都是等價的：

{{ expression }}    
[target] = "expression"  
bind-target = "expression"

{{ expression }}是插值和單向綁定
[ expression ]也是一個雙向綁定
(event)對於像事件（點擊）

[(ngModel)]用於雙向綁定，與此相同：

<input type="text" 
     [value] = "character.name" 
     (input) = "character.name = $event.target.value />

*ngFor和*ngIf是結構指示，*表示改變DOM

2016-03-16 21:39:32

回答