Acabei de começar a trabalhar com o Angular 2.

Eu queria saber quais são as diferenças entre componentes e diretivas no Angular 2?

Basicamente, existem três tipos de diretivas no Angular2 de acordo com a documentação.

• Componente
• Diretivas estruturais
• Diretivas de atributo

Componente

É também um tipo de diretiva com template, estilos e parte lógica que é o tipo de diretiva mais famoso entre todos no Angular2. Nesse tipo de diretiva, você pode usar outras diretivas, sejam elas personalizadas ou integradas na @Componentanotação, como a seguir:

@Component({
    selector: "my-app"
    directives: [custom_directive_here]
})

Use esta diretiva em sua visão como:

<my-app></my-app>

Para a diretiva de componentes, encontrei o melhor tutorial aqui.

Diretivas estruturais

Like *ngFore *ngIf, usado para alterar o layout DOM adicionando e removendo elementos DOM. explicado aqui

Diretivas de atributo

Eles são usados ​​para dar comportamento ou estilo personalizado aos elementos existentes, aplicando algumas funções / lógica. Like ngStyleé uma diretiva de atributo para dar estilo dinamicamente aos elementos. Podemos criar nossa própria diretiva e usá-la como atributo de alguns elementos predefinidos ou personalizados, aqui está o exemplo de uma diretiva simples:

Em primeiro lugar, temos que importar a diretiva de @angular/core

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

@Directive({
  selector: '[Icheck]',
})
export class RadioCheckbox {
   // custom logic here...
}

Podemos usar isso na visualização conforme mostrado abaixo:

<span Icheck>HEllo Directive</span>

Para mais informações, você pode ler o tutorial oficial aqui e aqui

Os componentes têm sua própria visão (HTML e estilos). As diretivas são apenas "comportamento" adicionado aos elementos e componentes existentes.
Componentestende Directive.

Por causa disso, pode haver apenas um componente em um elemento de host, mas várias diretivas.

As diretivas estruturais são diretivas aplicadas a <template>elementos e usadas para adicionar / remover conteúdo (carimbar o modelo). A *diretiva in em aplicações como *ngIffaz com que uma <template>tag seja criada implicitamente.

Para completar o que Günter disse, podemos distinguir dois tipos de diretivas:

• Os estruturais que atualizam o layout DOM adicionando ou removendo elementos. Os dois mais comuns são NgFore NgIf. Esses estão vinculados ao conceito de modelo e devem ser precedidos por um *. Consulte a seção "Modelos e *" neste link para obter mais detalhes: http://victorsavkin.com/post/119943127151/angular-2-template-syntax
• Os atributos que atualizam o comportamento da aparência do elemento ao qual estão anexados.

Espero que ajude você, Thierry

Aqui está a definição real.

• Se tiver um modelo , é um componente
• senão, se tiver um seletor entre colchetes "[assim]", é uma diretiva de atributo
• caso contrário, é uma diretiva estrutural .

Qualquer outra definição está errada.

Resumo:

Um componente é uma diretiva com uma visão associada (ou seja, HTML a ser renderizado). Todos os componentes são diretivas, mas nem todas as diretivas são componentes. Existem três tipos de diretivas:

• Componente : uma visualização com comportamento associado. Este tipo de diretiva realmente adiciona elementos DOM
• Diretivas de atributo : podem ser anexadas a elementos DOM (e componentes, pois são elementos DOM) para modificar a aparência ou o comportamento de um elemento.
• Diretivas estruturais : podem ser anexadas a elementos DOM (e componentes, pois são elementos DOM) para modificar o layout DOM. As diretivas estruturais começam com * e realmente adicionam ou removem o elemento DOM. Por exemplo, *ngIfque pode inserir ou remover um elemento DOM (ou componente angular que é um elemento DOM personalizado, mas ainda é um elemento DOM).

Exemplo:

import { Component, HostListener, HostBinding, Directive, ElementRef } from '@angular/core';

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

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf='myBool' appHighlight>Hi there</div>
  `,
  styleUrls: ['./app.component.scss'],
})
export class AppComponent  {

  myBool:boolean = true;

}

No exemplo acima, podemos observar o seguinte:

• O componente AppComponenttem um template com um <div>elemento que exibe, hi there.
• A diretiva de atributo HighlightDirective está localizada no <div>elemento. Isso significa que ele irá manipular o comportamento do <div>elemento. Nesse caso, ele destacará o texto e o tornará amarelo.
• A diretiva estrutural *ngIftambém está localizada no <div>elemento e determinará se o elemento deve ser inserido. O <div>será mostrado condicionalmente, dependendo se a expressão myBoolpode ser forçada a true.

Angular 2 segue o modelo de arquitetura de componente / serviço.

Um aplicativo angular 2 é feito de componentes. Um componente é a combinação de um modelo HTML e uma classe de componente (uma classe de script) que controla uma parte da tela.

Para uma boa prática, a classe de componente é usada para vinculação de dados à respectiva exibição. A vinculação de dados bidirecional é um ótimo recurso fornecido pela estrutura angular.

Os componentes são reutilizáveis ​​em seu aplicativo usando o nome do seletor fornecido.

O componente também é um tipo de diretiva com um modelo.

Outras duas diretivas são

1. Diretivas estruturais - altere o layout DOM adicionando e removendo elementos DOM. Ex: NgFore NgIf.

2. Diretivas de atributo - alteram a aparência ou comportamento de um elemento, componente ou outra diretiva. Ex: NgStyle

Na verdade, os componentes também são diretivas, mas têm diferenças entre eles.

Diretivas de atributos :

As diretivas de atributo são classes que podem modificar o comportamento ou a aparência de um único elemento. Para criar uma diretiva de atributo, aplique o @Directivea uma classe.

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

@Directive({
     selector: "[custom-attr]", })

export class CustomAttrDirective {

   constructor(element: ElementRef) {
      element.nativeElement.classList.add("bg-success", "text-white");    
   } 
}

Adicionando um atributo de diretiva template.html File

<tr *ngFor="let item of getProducts(); let i = index" custom-attr>
   <td>{{i + 1}}</td>
   <td>{{item.name}}</td>
</tr>

Diretivas Estruturais :

As diretivas estruturais alteram o layout do documento HTML adicionando e removendo elementos, como micro-modelos. As diretivas estruturais permitem que o conteúdo seja adicionado condicionalmente com base no resultado de uma expressão como, *ngIfou para que o mesmo conteúdo seja repetido para cada objeto em uma fonte de dados como *ngFor.

Você pode usar as diretivas integradas para tarefas comuns, mas escrever diretivas estruturais personalizadas fornece a capacidade de adaptar o comportamento ao seu aplicativo.

<p *ngIf="true">
  Expression is true and ngIf is true.
  This paragraph is in the DOM.
</p>
<p *ngIf="false">
  Expression is false and ngIf is false.
  This paragraph is not in the DOM.
</p>

Componentes :

Os componentes são diretivas que possuem seus próprios modelos, em vez de depender do conteúdo fornecido de outro lugar. Os componentes têm acesso a todos os recursos de diretiva, ainda têm um elemento de host, ainda podem definir propriedades de entrada e saída e assim por diante. Mas eles também definem seu próprio conteúdo.

Pode ser fácil subestimar a importância do modelo, mas o atributo e as diretivas estruturais têm limitações. As diretivas podem fazer um trabalho útil e poderoso, mas não têm muitos insights sobre os elementos aos quais se aplicam. As diretivas são mais úteis quando são ferramentas de uso geral, como a ngModeldiretiva, que pode ser aplicada a qualquer propriedade do modelo de dados e qualquer elemento de formulário, sem levar em conta para que os dados ou o elemento estão sendo usados.

Os componentes, por outro lado, estão intimamente ligados ao conteúdo de seus modelos. Os componentes fornecem os dados e a lógica que serão usados ​​pelas vinculações de dados que são aplicadas aos elementos HTML no modelo, que fornecem o contexto usado para avaliar as expressões de vinculação de dados e atuar como a cola entre as diretivas e o resto do aplicativo. Os componentes também são uma ferramenta útil para permitir que grandes projetos angulares sejam divididos em partes gerenciáveis.

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

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

do angular oficial

do livro Pro-Angular