@Directive vs @Component em Angular

Qual é a diferença entre @Componente @Directiveem Angular? Ambos parecem fazer a mesma tarefa e têm os mesmos atributos.

Quais são os casos de uso e quando preferir um ao outro?

Um @Component requer uma visualização, enquanto um @Directive não.

Diretivas

Eu comparo uma diretiva @Directive a uma diretiva Angular 1.0 com a opçãorestrict: 'A' (Diretivas não se limitam ao uso de atributos.) Diretivas adicionam comportamento a um elemento DOM existente ou a uma instância de componente existente. Um exemplo de caso de uso de uma diretiva seria registrar um clique em um elemento.

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

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

Qual seria usado assim:

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

Componentes

Um componente, em vez de adicionar / modificar comportamento, na verdade cria sua própria exibição (hierarquia de elementos DOM) com o comportamento anexado. Um exemplo de caso de uso para isso pode ser um componente do cartão de contato:

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() {}
}

Qual seria usado assim:

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

ContactCardé um componente reutilizável da interface do usuário que poderíamos usar em qualquer lugar do aplicativo, mesmo em outros componentes. Eles basicamente compõem os componentes básicos da interface do usuário de nossos aplicativos.

Em suma

Escreva um componente quando desejar criar um conjunto reutilizável de elementos DOM da interface do usuário com comportamento personalizado. Escreva uma diretiva quando desejar escrever um comportamento reutilizável para complementar os elementos DOM existentes.

Fontes:

• Documentação @Directive
• Documentação do @Component
• Postagem útil no blog

Componentes

1. Para registrar um componente, usamos @Componenta anotação de metadados.
2. Component é uma diretiva que usa o DOM de sombra para criar um comportamento visual encapsulado chamado componentes. Os componentes são normalmente usados ​​para criar widgets da interface do usuário.
3. O componente é usado para dividir o aplicativo em componentes menores.
4. Apenas um componente pode estar presente por elemento DOM.
5. @View decorador ou modelo templateurl são obrigatórios no componente.

Directiva

1. Para registrar diretivas, usamos @Directiveanotações de metadados.
2. A diretiva é usada para adicionar comportamento a um elemento DOM existente.
3. A diretiva é usada para projetar componentes reutilizáveis.
4. Muitas diretivas podem ser usadas por elemento DOM.
5. A diretiva não usa o View.

Fontes:

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

Um componente é uma diretiva com um modelo e o @Componentdecorador é na verdade um @Directivedecorador estendido com recursos orientados a modelos.

No Angular 2 e acima, "tudo é um componente". Os componentes são a principal maneira de criar e especificar elementos e lógica na página, por meio de elementos e atributos personalizados que adicionam funcionalidade aos nossos componentes existentes.

http://learnangular2.com/components/

Mas quais diretivas fazem então no Angular2 +?

Diretivas de atributo anexam comportamento a elementos.

Existem três tipos de diretivas no Angular:

1. Componentes - diretivas com um modelo.
2. Diretivas estruturais - altere o layout do DOM adicionando e removendo elementos DOM.
3. Diretivas de atributos - altere a aparência ou o comportamento de um elemento, componente ou outra diretiva.

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

Portanto, o que está acontecendo no Angular2 e acima é que Diretivas são atributos que adicionam funcionalidades a elementos e componentes .

Veja a amostra abaixo do Angular.io:

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

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

Então, o que ele faz, estende os componentes e elementos HTML com a adição de fundo amarelo e você pode usá-lo como abaixo:

<p myHighlight>Highlight me!</p>

Mas os componentes criarão elementos completos com todas as funcionalidades, como abaixo:

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)
  }
}

e você pode usá-lo como abaixo:

<my-component></my-component>

Quando usamos a tag no HTML, esse componente será criado e o construtor será chamado e renderizado.

Detecção de alterações

Somente @Componentpode ser um nó na árvore de detecção de alterações. Isso significa que você não pode definir ChangeDetectionStrategy.OnPushem a @Directive. Apesar deste fato, uma directiva pode ter @Inpute @Outputpropriedades e você pode injetar e manipular do componente do host ChangeDetectorRefa partir dele. Portanto, use Componentes quando precisar de um controle granular sobre sua árvore de detecção de alterações.

Em um contexto de programação, as diretivas fornecem orientações ao compilador para alterar como ele processaria a entrada, ou seja, alterar algum comportamento.

"As diretivas permitem anexar o comportamento a elementos no DOM."

diretrizes são divididas em três categorias:

• Atributo
• Estrutural
• Componente

Sim, no Angular 2, os componentes são um tipo de diretiva. De acordo com o Doc,

“Componentes angulares são um subconjunto de diretivas. Diferentemente das diretivas, os componentes sempre têm um modelo e apenas um componente pode ser instanciado por um elemento em um modelo. ”

Os componentes Angular 2 são uma implementação do conceito de componente da Web . O Web Components consiste em várias tecnologias separadas. Você pode pensar nos Web Components como widgets reutilizáveis ​​da interface com o usuário criados usando a tecnologia da Web aberta.

• Assim, em diretrizes resumidas O mecanismo pelo qual atribuímos comportamento aos elementos no DOM, consistindo nos tipos Estrutural, Atributo e Componente.
• Componentes são o tipo específico de diretiva que nos permite utilizar a funcionalidade de componentes da Web AKA reutilizável - elementos reutilizáveis, encapsulados e disponíveis em toda a nossa aplicação.

Se você consultar os documentos angulares oficiais

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

Existem três tipos de diretivas no Angular:

1. Componentes - diretivas com um modelo.
2. Diretivas estruturais - altere o layout do DOM adicionando e removendo elementos DOM. por exemplo, * ngIf
3. Diretivas de atributos - altere a aparência ou o comportamento de um elemento, componente ou outra diretiva. por exemplo, [ngClass].

À medida que o aplicativo cresce, encontramos dificuldades em manter todos esses códigos. Para fins de reutilização, separamos nossa lógica em componentes inteligentes e componentes burros e usamos diretivas (estruturais ou de atributo) para fazer alterações no DOM.

Componentes

Os componentes são o componente básico da interface do usuário de um aplicativo Angular. Um aplicativo Angular contém uma árvore de componentes Angular. Nossa aplicação no Angular é construída em uma árvore de componentes . Cada componente deve ter o seu modelo, estilo, ciclo de vida, seletor, etc. Assim, cada componente tem sua estrutura Você pode tratá-los como um pequeno aplicativo da Web independente distante com modelo próprio e lógica e uma possibilidade de se comunicar e ser utilizado em conjunto com outros componentes.

Exemplo de arquivo .ts para Component:

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';
}

e sua visualização do modelo ./app.component.html:

Hello {{title}}

Em seguida, você pode renderizar o modelo AppTrainingComponent com sua lógica em outros componentes (após adicioná-lo ao módulo)

<div>
   <app-training></app-training>
</div>

e o resultado será

<div>
   my-app-training
</div>

como AppTrainingComponent foi processado aqui

Veja mais sobre componentes

Diretivas

A diretiva altera a aparência ou o comportamento de um elemento DOM existente. Por exemplo [ngStyle] é uma diretiva. As diretivas podem estender os componentes (podem ser usados ​​dentro delas), mas elas não criam um aplicativo inteiro . Digamos que eles apenas suportem componentes. Eles não têm seu próprio modelo (mas é claro, você pode manipular o modelo com eles).

Diretiva de exemplo:

@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;
  }
}

E seu uso:

<p [appHighlight]="color" [otherPar]="someValue">Highlight me!</p>

Veja mais sobre diretrizes