angular2中的不同指令

Question

我是Angular 2的新手。

有人可以解釋html指令和屬性指令之間的區別嗎？ 為什么都需要它們？

例：

<rating [rate]="rate" (rate-change)="onUpdate($event)"></rating>

所以：

rating是我所謂的“ html指令”，但是我不確定它的用途是什么？

[rate]是一個屬性指令，用於設置名為“ rate”的組件屬性。

(rate-change)是一個屬性指令，它調用名為rateChange的組件方法。

還有其他類型的指令嗎？

Answer 1

因此，讓我們分部分進行：

• rating是一個組成部分 。 angular 2中的組件是單個運行代碼，由一個打字稿文件（使用@Component裝飾器），一個模板和一些樣式組成。 如果您來自有角度的1世界，那有點類似於element指令
• [rate]是屬性指令 。 基本上，它們將值（在這種情況下為rate）綁定到任何html屬性。
• (rate-change)是事件處理程序 。 在這種情況下，您可以使用EventEmmiter觸發自定義事件

Answer 2

我認為您對命名感到困惑。 讓我們嘗試使事情井井有條：

在您的示例中， rating是一個組成部分 。 這是Angular創建具有自定義行為的新DOM元素的方法。 它的代碼很可能看起來像：

@Component({
  selector: 'rating'
  ...
})

[rate]是一個棘手的問題，因為在這種狹窄的上下文中，它可以是rating組件的輸入屬性，也可以是不相關的attribute指令 。

(rate-change)是事件處理程序，在這種情況下，它是rating組件的輸出 ，因為它不是標准的DOM事件（例如click ）。