@ Directive v / s @Component in Angular

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

什么是用例以及什么时候更喜欢一个呢？

---

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

资料来源：

@指令性文件

@组件文档

有用的博客帖子

---

组件

要注册一个组件，我们使用@Component元数据注释。

Component是一个指令，它使用shadow DOM来创建称为组件的封装可视行为。 组件通常用于创建UI小部件。

组件用于将应用程序分解为更小的组件。

每个DOM元素只能有一个组件。

组件中必须使用@View装饰器或templateurl模板。

指示

要注册指令，我们使用@Directive元数据注释。

指令用于将行为添加到现有的DOM元素。

指令用于设计可重用组件。

每个DOM元素都可以使用许多指令。

指令不使用视图。

资料来源：

http://www.codeandyou.com/2016/01/difference-between-component-and-directive-in-Angular2.html

---

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

链接地址: http://www.djcxy.com/p/55467.html

上一篇: @Directive v/s @Component in Angular

下一篇: AngularJS : Where to use promises?