Angular中的@Component和@Directive有什么区别? 它们似乎都做同样的任务,具有相同的属性。

用例是什么,什么时候选择一个而不是另一个?


当前回答

指令:

指令是向元素添加额外行为的类。

不同类型的指令有:

组件:这些指令包含模板 属性指令:这些类型的指令改变元素、组件、其他指令的视图或行为 结构性指令:这些指令通过添加或删除DOM元素来改变DOM布局。

其他回答

变化检测

只有@Component可以是变更检测树中的节点。这意味着您不能设置ChangeDetectionStrategy。在@Directive中OnPush。尽管如此,一个指令可以有@Input和@Output属性,你可以从中注入和操作宿主组件的ChangeDetectorRef。因此,当您需要对变更检测树进行粒度控制时,请使用组件。

组件

要注册一个组件,我们使用@Component元数据注释。 Component是一个指令,它使用shadow DOM创建封装的可视行为,称为组件。组件通常用于创建UI小部件。 组件用于将应用程序分解为更小的组件。 每个DOM元素只能有一个组件。 @View decorator或templateurl template在组件中是必选项。

指令

要注册指令,我们使用@Directive元数据注释。 指令用于向现有DOM元素添加行为。 指令用于设计可重复使用的组件。 每个DOM元素可以使用许多指令。 指令不使用视图。

来源:

https://www.devdiscuss.com/difference-between-component-and-directive-in-angular-2/

组件是一个带有模板的指令,@Component装饰器实际上是一个@Directive装饰器,它扩展了面向模板的特性。

组件是一个单独的单元,它封装了视图和逻辑,而指令是用来增强组件或dom元素的行为的,它没有任何模板。

组件扩展指令,因此每个组件都是指令。

组件和指令都可以有生命周期钩子、输入、输出、提供程序和查询。 组件还可以有视图提供者、changedetectionstrategy、 模板、样式和视图封装。

我们可以使用组件来构建功能元素和指令 为元素创建自定义。

简单的回答

组件:一个主要的构建块,用于添加一些DOM元素/Html。

指令:用于在DOM元素/HTML中添加一些表达式、条件和循环。