AngularJs 2.0内置组件 - 如何正确使用它们

Question

Angular 2提供了许多内置组件。例如NgIf，NgFor，NgStyle，NgNonBindable ......一些组件与'*'一起使用，例如* ngIf和* ngFor：

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

其中一些与'[]'一起使用，例如[ngStyle]和[ngClass] :(组件输入？）

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

有些像'Angular-1'一样使用：例如：

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

有谁知道为什么？有什么区别？我如何记住正确使用它们的方法？

Answer 1

Angular 2指令导致对DOM进行某种更改，例如ngIf用于有条件地添加/删除块或ngFor - 用于重复的那些用星号标记＆＃34; *＆＃34;。

ngStyle和ngClass与＆＃34; []＆＃34;一起使用因为这会导致one way data binding到具有传递值的元素的所需属性。

某些指令（如ngNonBindable）用于Angular 1样式，因为他们使用don不需要数据绑定来围绕它们使用＆＃34; []＆＃34;或者用香蕉语框＃34; [（）]＆＃34; （双向数据绑定），但为Angular核心提供有关当前元素的信息。

Answer 2

只是为了好玩，这些都是等价的：

{{ 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