javascript – @Directive v / s @Component in Angular

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

有什么用例以及何时优先使用另一个？

@Component需要一个视图,而@Directive则不需要.

指令

我将@Directive比作Angular 1.0指令,选项为restrict：’A'(指令不限于属性用法.)指令将行为添加到现有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 documentation
> @Component documentation
> Helpful blog post

javascript – @Directive v / s @Component in Angular

相关文章