Angular中的@Component和@Directive有什么区别? 它们似乎都做同样的任务,具有相同的属性。
用例是什么,什么时候选择一个而不是另一个?
Angular中的@Component和@Directive有什么区别? 它们似乎都做同样的任务,具有相同的属性。
用例是什么,什么时候选择一个而不是另一个?
当前回答
变化检测
只有@Component可以是变更检测树中的节点。这意味着您不能设置ChangeDetectionStrategy。在@Directive中OnPush。尽管如此,一个指令可以有@Input和@Output属性,你可以从中注入和操作宿主组件的ChangeDetectorRef。因此,当您需要对变更检测树进行粒度控制时,请使用组件。
其他回答
组件是一个带有模板的指令,@Component装饰器实际上是一个@Directive装饰器,它扩展了面向模板的特性。
在编程环境中,指令为编译器提供指导,以改变它处理输入的方式,即改变某些行为。
指令允许你将行为附加到DOM中的元素上。
指令分为3类:
属性 结构 组件
是的,在Angular 2中,组件是一种指令。 据医生说,
“Angular组件是指令的一个子集。与指令不同,组件总是有一个模板,并且模板中的每个元素只能实例化一个组件。”
Angular 2组件是Web组件概念的实现。Web组件由几个独立的技术组成。您可以将Web组件看作是使用开放Web技术创建的可重用用户界面小部件。
在摘要指令中,我们将行为附加到DOM中的元素的机制,包括结构化的, 属性和组件类型。 组件是特定类型的指令,允许我们 利用web组件功能即可重用性- 封装的、可重用的元素可在整个应用程序中使用。
组件
组件是Angular应用中最基本的UI构建块。Angular应用中包含一个Angular组件树。我们在Angular中的应用是构建在一个组件树上的。每个组件都应该有自己的模板、样式、生命周期、选择器等等。因此,每个组件都有自己的结构,你可以将它们视为一个独立的小型web应用程序,有自己的模板和逻辑,并有可能与其他组件通信和一起使用。
Component的.ts文件示例:
import { Component } from '@angular/core';
@Component({
// component attributes
selector: 'app-training',
templateUrl: './app-training.component.html',
styleUrls: ['./app-training.component.less']
})
export class AppTrainingComponent {
title = 'my-app-training';
}
以及它的。/app.component.html模板视图:
Hello {{title}}
然后你可以在其他组件中呈现AppTrainingComponent模板及其逻辑(在将其添加到模块后)
<div>
<app-training></app-training>
</div>
结果就是
<div>
my-app-training
</div>
as AppTrainingComponent在这里被渲染
有关组件的详细信息
指令
指令更改现有DOM元素的外观或行为。例如[ngStyle]是一个指令。指令可以扩展组件(可以在组件内部使用),但它们不能构建整个应用程序。假设它们只支持组件。它们没有自己的模板(当然,您可以使用它们来操作模板)。
示例指令:
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) { }
@Input('appHighlight') highlightColor: string;
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.highlightColor || 'red');
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
及其用法:
<p [appHighlight]="color" [otherPar]="someValue">Highlight me!</p>
查看更多关于指令的信息
如果你参考官方的angular文档
https://angular.io/guide/attribute-directives
Angular中有三种指令:
组件——带有模板的指令。 结构指令——通过添加和删除DOM元素来改变DOM布局。如* ngIf 属性指令——改变元素、组件或其他指令的外观或行为。如[ngClass]。
随着应用程序的增长,我们发现很难维护所有这些代码。出于可重用的目的,我们在智能组件和哑组件中分离了逻辑,并使用指令(结构或属性)在DOM中进行更改。
组件是一个单独的单元,它封装了视图和逻辑,而指令是用来增强组件或dom元素的行为的,它没有任何模板。
组件扩展指令,因此每个组件都是指令。
组件和指令都可以有生命周期钩子、输入、输出、提供程序和查询。 组件还可以有视图提供者、changedetectionstrategy、 模板、样式和视图封装。
我们可以使用组件来构建功能元素和指令 为元素创建自定义。