angular2中的不同指令

Question

我是Angular 2的新手。

有人可以解释一下html指令和属性指令之间的区别吗？为什么他们都需要？

示例：

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

所以：

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

[rate]是一个属性指令，用于设置名为“rate”的组件属性。

(rate-change)是一个属性指令，它调用名为rateChange的组件方法。

任何其他类型的指令？

Answer 1

因此，让我们分一些：

• min是component。角度为2的组件是单个运行代码，由打字稿文件（使用@Component装饰器），模板和一些样式组成。如果你来自angular 1世界，它有点类似于元素指令
• rating是attribute directive。基本上，它们将值（在这种情况下为速率）绑定到任何html属性。
• [rate]是event handler。在这种情况下，您可以使用EventEmmiter
触发自定义事件

Answer 2

我认为你已经对命名感到困惑。让我们尝试按顺序排列：

在你的例子中， rating是component。这是Angular使用自定义行为创建新DOM元素的方法。它的代码很可能看起来像：

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

[rate]是棘手的，因为从这个狭窄的上下文中，它可以是rating组件的input属性，也可以是无关的attribute directive。

(rate-change)是一个事件处理程序，在这种情况下它是rating组件的output，因为它不是标准DOM事件（如click）。