javascript - use - @Directive v/s @Component em Angular




use js in angular (6)

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 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 é 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 seus 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.

https://code.i-harness.com

Qual é a diferença entre @Component e @Directive in 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?


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 seu modelo, estilo, ciclo de vida, seletor, etc. Portanto, cada componente tem sua estrutura. Você pode tratá-los como um pequeno aplicativo da Web independente, com um próprio modelo e lógica, além da possibilidade de se comunicar e ser usado 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


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.

  • Então, nas diretivas resumidas O mecanismo pelo qual anexamos o 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 ​​e encapsulados disponíveis em todo o aplicativo.

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

  1. Para registrar um componente, usamos a @Component meta-dados @Component .
  2. Component é uma diretiva que usa o DOM 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 @View ou o modelo templateurl são obrigatórios no componente.

Directiva

  1. Para registrar diretivas, usamos a @Directive meta-dados @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 View.

Fontes:

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


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

Diretivas

Eu comparo uma @Directive a uma diretiva Angular 1.0 com a opção restrict: 'A' (As diretivas não se limitam 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 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 dentro de 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:





typescript