Angular中的@Directive vs @Component

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

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

159668 次浏览
小开
最佳答案

@Component需要一个视图，而@Directive不需要。

指令

我把@Directive比作带有restrict: 'A'选项的Angular 1.0指令(指令不限于属性的使用)指令向现有DOM元素或现有组件实例添加行为。指令的一个示例用例是记录对元素的单击。

import {Directive} from '@angular/core';


@Directive({
selector: "[logOnClick]",
hostListeners: {
'click': 'onClick()',
},
})
class LogOnClick {
constructor() {}
onClick() { console.log('Element clicked!'); }
}

可以这样使用:

<button logOnClick>I log when clicked!</button>

组件

组件，而不是添加/修改行为，实际上创建自己的视图(DOM元素的层次结构)与附加的行为。一个示例用例可能是一个联系人卡组件:

import {Component, View} from '@angular/core';


@Component({
selector: 'contact-card',
template: `
<div>
<h1>\{\{name}}</h1>
<p>\{\{city}}</p>
</div>
`
})
class ContactCard {
@Input() name: string
@Input() city: string
constructor() {}
}

可以这样使用:

<contact-card [name]="'foo'" [city]="'bar'"></contact-card>

ContactCard是一个可重用的UI组件，我们可以在应用程序的任何地方使用它，甚至可以在其他组件中使用。这些基本构成了应用程序的UI构建块。

总之

当你想用自定义行为创建一组可重用的UI DOM元素时，编写一个组件。当您希望编写可重用行为以补充现有DOM元素时，请编写一个指令。

来源:

  • < a href = " https://angular。io/api/core/Directive" rel="noreferrer">@Directive文档 .
  • < a href = " https://angular。io/api/core/Component" rel="noreferrer">@组件文档 .
  • 有用的博客文章
小开

组件

  1. 要注册一个组件，我们使用@Component元数据注释。
  2. Component是一个指令，它使用shadow DOM创建封装的可视行为，称为组件。组件通常用于创建UI小部件。
  3. 组件用于将应用程序分解为更小的组件。
  4. 每个DOM元素只能有一个组件。
  5. @View装饰器或templateurl模板在组件中是强制性的。

指令

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

来源:

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

小开

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

小开
在Angular 2及以上版本中，“所有东西都是组件。”组件是 我们在页面上构建和指定元素和逻辑的主要方式， 通过添加功能的自定义元素和属性 我们现有的组件。

http://learnangular2.com/components/

但是在Angular2+中指令是做什么的呢?

属性指令将行为附加到元素上。

Angular中有三种指令:

  1. 组件——带有模板的指令。
    2. <李>结构性directives-change 通过添加和删除DOM元素来调整DOM布局。李< / >
  2. 属性指令-改变元素的外观或行为， 组件，或者另一个指令

https://angular.io/docs/ts/latest/guide/attribute-directives.html

所以在Angular2和上面的指令中发生的是为元素和组件添加功能的属性。

看看下面Angular.io的示例:

import { Directive, ElementRef, Input } from '@angular/core';


@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}

它会扩展你的组件和HTML元素，添加黄色背景，你可以像下面这样使用:

<p myHighlight>Highlight me!</p>

但是组件将创建具有所有功能的完整元素，如下所示:

import { Component } from '@angular/core';


@Component({
selector: 'my-component',
template: `
<div>Hello my name is \{\{name}}.
<button (click)="sayMyName()">Say my name</button>
</div>
`
})
export class MyComponent {
name: string;
constructor() {
this.name = 'Alireza'
}
sayMyName() {
console.log('My name is', this.name)
}
}

你可以这样使用它:

<my-component></my-component>

当我们在HTML中使用标记时，该组件将被创建，构造函数将被调用并呈现。

小开

变化检测

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

小开

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

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

指令分为3类:

  • 属性
  • 结构
  • 组件
是的，在Angular 2中，组件是一种指令。 根据医生的说法，

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

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

    我们将行为附加到DOM中的元素的机制，包括Structural， 属性和组件类型。 组件是允许我们这样做的特定类型的指令 利用Web组件功能即可重用性- 封装的、可重用的元素可在整个应用程序中使用
小开

如果你参考官方的angular文档

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

Angular中有三种指令:

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

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

小开

组件

组件是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在这里被渲染

看到# EYZ0

指令

指令更改现有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>

看到# EYZ0

小开

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

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

  • 组件和指令都可以有生命周期钩子、输入、输出、提供程序和查询。
    • 组件可以有额外的视图提供者，changedetectionstrategy， 模板，样式和视图封装
我们可以使用组件来构建一个有特色的元素和指令

小开

简单的回答

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

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

小开

指令:

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

不同类型的指令有:

  1. 这些指令包含模板
  2. 这些类型的指令改变元素、组件、其他指令的视图或行为
  3. 这些指令通过添加或删除DOM元素来改变DOM布局。
小开

这是Angular 13的最新更新

@Component只是@Directive的一个子类。在深入研究这个问题之前，我们必须了解什么是@Directive…

@Directive是一个装饰器，用于指示DOM添加新元素或删除或修改现有元素。因此，无论何时Angular遇到任何装饰器，它都会在运行时处理它们，并根据它们修改DOM。

我们可以使用@Directive创建我们的指令，如下所示

@Directive({
selector: '[demoButtonColor]'
})
export class DemoButtonColorDirective {
constructor(private elementRef: ElementRef) { };
ngOnInit() {
this.elementRef.nativeElement.style.backgroundColor = 'red';
}
}

在HTML中使用

<button demoButtonColor>RED BUTTON</button>

现在让我们看看什么是@Component decorator

@ component是@Directive的一个子类，有一个额外的功能。使用@Component，我们可以创建HTML模板，它可以在运行时注入到DOM中。

@Component({
selector: 'demo-color',
template: '<h1>Hello There!</h1>'
})
class DemoColorComponent {}

我们可以在任何其他组件中重用它，如下所示

<div>
<demo-color></demo-color>
</div>

结束，使用@Directive创建一个定制指令，可以用来修改DOM的元素或结构。如果你想创建具有自定义行为的可重用UI组件，请使用@Component。


提交答案