关于javascript：@Directive v / s @Component in Angular


@Directive v/s @Component in Angular

在角度上，@Component和@Directive有什么区别？他们两个似乎都完成了相同的任务，具有相同的属性。

什么是用例，什么时候更喜欢一个用例而不是另一个用例？

相关讨论

@component需要视图，而@directive不需要。

指令

i将@directive与选项restrict: 'A'的angular 1.0 directive进行比较<(directives are not limited to attribute usage.)directives add behavior to an existing dom element or an existing component instance.指令的一个示例用例是记录对元素的单击。

1
2
3
4
5
6
7
8
9
10
11
12
import {Directive} from '@angular/core';

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

使用方法如下：

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

号组件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import {Component, View} from '@angular/core';

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

使用方法如下：

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

。

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

总之

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

资料来源：

  • @指令文件
  • @组件文档
  • 有用的博客文章
相关讨论

组件

  • 为了注册一个组件，我们使用@Component元数据注释。
  • component是一个指令，它使用shadom创建封装的可视行为components。组件通常用于创建UI小部件。
  • 组件用于将应用程序分解为较小的组件。
  • 每个DOM元素只能存在一个组件。
  • 组件中必须有@Viewdecorator或templateURL模板。

    • 指令

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

    • 资料来源：

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

    相关讨论

    组件是一个带有模板的指令，而@Component修饰器实际上是一个扩展了面向模板功能的@Directive修饰器。

    相关讨论

    In Angular 2 and above,"everything is a component." Components are
    the main way we build and specify elements and logic on the page,
    through both custom elements and attributes that add functionality to
    our existing components.

    号

    http://learnangular2.com/components/组件/

    但是在Angular2+中有什么指示呢？

    Attribute directives attach behaviour to elements.

    There are three kinds of directives in Angular:

  • Components—directives with a template.
  • Structural directives—change
    the DOM layout by adding and removing DOM elements.
  • Attribute directives—change the appearance or behaviour of an element,
    component, or another directive.

    • 号

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

    因此，在Angular2和更高版本中，指令是向元素和组件添加功能的属性。

    从angular.io查看下面的示例：

    1
    2
    3
    4
    5
    6
    7
    8
    import { Directive, ElementRef, Input } from '@angular/core';

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

    因此，它将通过添加黄色背景扩展组件和HTML元素，您可以使用它，如下所示：

    1
    2
    <p myHighlight>Highlight me!
    </p>

    。

    但组件将创建具有以下所有功能的完整元素：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    import { Component } from '@angular/core';

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

    。

    您可以使用它，如下所示：

    1
    <my-component></my-component>

    在HTML中使用标记时，将创建此组件，并调用和呈现构造函数。

    变更检测

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

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

    "Directives allow you to attach behavior to elements in the DOM."

    号

    指令分为三类：

    • 属性
    • 结构
    • 组件

    是的，在角2中，组件是一种指令。据医生说，

    "Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template."

    号

    Angular2组件是Web组件概念的一个实现。Web组件由几个单独的技术组成。您可以将Web组件视为使用开放式Web技术创建的可重用用户界面小部件。

    • 因此，在总结指令中，我们将行为附加到DOM中的元素的机制，由结构，属性和组件类型。
    • 组件是允许我们利用Web组件功能，即重用性-在我们的应用程序中提供封装的、可重用的元素。

    如果你参考官方的角度文件

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

    在角度上有三种指令：

  • 带有模板的组件指令。
  • 结构指令通过添加和删除DOM元素来更改DOM布局。例如*ngif
  • 属性指令更改元素、组件或其他指令的外观或行为。例如[NGClass]。

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