@Directive v / s @Component em Angular

Qual é a diferença entre @Component e @Directive em Angular? Ambos parecem fazer a mesma tarefa e ter os mesmos atributos.

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

Um @Component requer uma visão enquanto um @Directive não.

Diretivas

Eu comparo uma diretiva @Directive a uma diretiva Angular 1.0 com a opção restrict: 'A' (diretivas não estão limitadas ao uso de atributos). As diretivas adicionam comportamento a um elemento DOM existente ou a uma instância de componente existente. Um exemplo de caso de uso para 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:

  

Componentes

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

 import {Component, View} from '@angular/core'; @Component({ selector: 'contact-card', template: ` 

{{name}}

{{city}}

` }) class ContactCard { @Input() name: string @Input() city: string constructor() {} }

Qual seria usado assim:

  

ContactCard é um componente de interface do usuário reutilizável que podemos usar em qualquer lugar de nosso aplicativo, mesmo dentro de outros componentes. Estes basicamente compõem os blocos de construção da interface do usuário de nossos aplicativos.

Em suma

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

Fontes:

  • @Diretório diretivo
  • Documentação do @Component
  • Postagem útil no blog

Componentes

  1. Para registrar um componente, usamos a @Component metadados @Component .
  2. Component é uma diretiva que usa shadow DOM para criar um comportamento visual encapsulado chamado components. Componentes são normalmente usados ​​para criar widgets de interface do usuário.
  3. Componente é usado para dividir o aplicativo em componentes menores.
  4. Apenas um componente pode estar presente por elemento DOM.
  5. @View decorator ou templateurl é obrigatório no componente.

Directiva

  1. Para registrar diretivas, usamos a @Directive metadados @Directive .
  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 modo de exibição.

Fontes:

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

Um componente é uma diretiva-com-um-modelo e o decorador @Component é na verdade um decorador @Directive estendido com resources orientados a modelo.

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 personalizados e atributos que adicionam funcionalidade aos componentes existentes.

http://learnangular2.com/components/

Mas que diretivas fazem então no Angular2 +?

As diretivas de atributo anexam o comportamento aos elementos.

Existem três tipos de diretivas em Angular:

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

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

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

Veja o exemplo abaixo em 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, ele irá estender seus componentes e elementos HTML adicionando fundo amarelo e você pode usá-lo como abaixo:

 

Highlight me!

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

 import { Component } from '@angular/core'; @Component({ selector: 'my-component', template: ` 
Hello my name is {{name}}.
` }) export class MyComponent { name: string; constructor() { this.name = 'Alireza' } sayMyName() { console.log('My name is', this.name) } }

e você pode usá-lo como abaixo:

  

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

Alterar detecção

Apenas @Component pode ser um nó na tree de detecção de alterações. Isso significa que você não pode definir ChangeDetectionStrategy.OnPush em um @Directive . Apesar disso, uma Diretiva pode ter as propriedades @Output e @Output e você pode injetar e manipular o ChangeDetectorRef do componente host a partir dele. Portanto, use Componentes quando precisar de um controle granular sobre a tree de detecção de alterações.

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

“As diretivas permitem append o comportamento a elementos no DOM”.

diretivas são divididas em três categorias:

  • Atributo
  • Estrutural
  • Componente

Sim, em Angular 2, Componentes são um tipo de Diretiva. Segundo o Doc,

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

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

  • Então, em diretivas de resumo O mecanismo pelo qual nós anexamos o comportamento a elementos no DOM, consistindo em tipos Estrutural, Atributo e Componente.
  • Componentes são o tipo específico de diretiva que nos permite utilizar a funcionalidade do componente da Web. Capacidade de reutilização AKA – elementos encapsulados e reutilizáveis ​​disponíveis em todo o nosso aplicativo.