Angular 中的 @Directive 与 @Component

Question

Angular中的 @Component 和 @Directive 有什么区别？他们俩似乎都在做同样的任务，并且具有相同的属性。

什么是用例以及何时更喜欢一个而不是另一个？

原文由 Prasanjit Dey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

@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 元素时，请编写指令。

资料来源：

• @Directive 文档
• @Component 文档
• 有用的博文

原文由 jaker 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是 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 装饰器是什么

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

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

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

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

总结一下， 使用 @Directive 创建一个自定义指令，该指令可用于修改 DOM 的元素或结构。如果您想创建具有自定义行为的可重用 UI 组件，请使用 @Component。

原文由 Nikhil Yadav 发布，翻译遵循 CC BY-SA 4.0 许可协议