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

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


当前回答

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

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

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

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

其他回答

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

变化检测

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

指令:

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

不同类型的指令有:

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

如果你参考官方的angular文档

https://angular.io/guide/attribute-directives

Angular中有三种指令:

组件——带有模板的指令。 结构指令——通过添加和删除DOM元素来改变DOM布局。如* ngIf 属性指令——改变元素、组件或其他指令的外观或行为。如[ngClass]。

随着应用程序的增长,我们发现很难维护所有这些代码。出于可重用的目的,我们在智能组件和哑组件中分离了逻辑,并使用指令(结构或属性)在DOM中进行更改。

在编程环境中,指令为编译器提供指导,以改变它处理输入的方式,即改变某些行为。

指令允许你将行为附加到DOM中的元素上。

指令分为3类:

属性 结构 组件

是的,在Angular 2中,组件是一种指令。 据医生说,

“Angular组件是指令的一个子集。与指令不同,组件总是有一个模板,并且模板中的每个元素只能实例化一个组件。”

Angular 2组件是Web组件概念的实现。Web组件由几个独立的技术组成。您可以将Web组件看作是使用开放Web技术创建的可重用用户界面小部件。

在摘要指令中,我们将行为附加到DOM中的元素的机制,包括结构化的, 属性和组件类型。 组件是特定类型的指令,允许我们 利用web组件功能即可重用性- 封装的、可重用的元素可在整个应用程序中使用。