@Directive v / s @Component in Angular

@Directiveは表示しませんが、@Componentはビューを必要とします。

指令

@DirectiveとAngular 1.0ディレクティブをオプションで指定していますrestrict: 'A'ディレクティブは、既存のDOM要素または既存のコンポーネントインスタンスに動作を追加します（ディレクティブは属性の使用に限定されません）。ディレクティブの使用例の1つは、要素にクリックを記録することです。

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

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

どのように使用されるように：

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

コンポーネント

コンポーネントは、振る舞いを追加/変更するのではなく、振る舞いを付加した独自のビュー（DOM要素の階層）を実際に作成します。これの使用例としては、連絡先カードのコンポーネントがあります。

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

どのように使用されるように：

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

ContactCard他のコンポーネント内であっても、アプリケーションのどこでも使用できる再利用可能なUIコンポーネントです。これらは基本的に、アプリケーションのUIビルディングブロックを構成します。

要約すれば

カスタム動作でUIのDOM要素の再利用可能なセットを作成する場合は、コンポーネントを作成します。既存のDOM要素を補うための再利用可能な動作を記述するときには、ディレクティブを作成します。

ソース：

• @ディレクティブドキュメント
• @Component documentation
• 役に立つブログ投稿

• @directive注釈はtemplate / templateUrlプロパティを持っていますか？ - Pardeep jain
• この答えはまだ真実ですか？ angular2チュートリアル自体は、ビューを持たないコンポーネントを作成します - Tamas Hegedus
• ビューは表示されませんが、テンプレートまたはテンプレートはコンポーネントで必須です - Luca Trazzi
• 私はこのような答えが気に入っていますが、フレームワークに重大な変更が生じたときには、本当にアップデートを感謝します。 - Memet Olsen
• 最初の2点のリンクは今や死んでいる。 - Shashank Vivek

コンポーネント

1. 使用するコンポーネントを登録するには@Componentメタデータ注釈。
2. Componentは、シャドウDOMを使用して、コンポーネントと呼ばれるカプセル化された視覚的動作を作成する指示です。コンポーネントは、通常、UIウィジェットを作成するために使用されます。
3. コンポーネントは、アプリケーションをより小さなコンポーネントに分割するために使用されます。
4. DOM要素ごとに1つのコンポーネントしか存在できません。
5. @Viewデコレータまたはテンプレートのテンプレートはコンポーネントで必須です。

指令

1. 使用するディレクティブを登録するには@Directiveメタデータ注釈。
2. ディレクティブは、既存のDOM要素に動作を追加するために使用されます。
3. 指令は再使用可能なコンポーネントの設計に使用されます。
4. DOM要素ごとに多くのディレクティブを使用できます。
5. ディレクティブはViewを使用しません。

ソース：

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

• 必要な数のコンポーネントインスタンスを使用できます - Mihai Răducanu
• コンポーネント - ポイント4.私はそれが間違っていると思う - それは複数回使用することができます。実際には拡張されたディレクティブ＆＃39; - Lida Weng
• 例でこれを拡張できました。 - Mukus

コンポーネントとは、ディレクティブ付きのテンプレートであり、@Componentデコレータは実際には@Directiveデコレータはテンプレート指向の機能で拡張されました。

• なぜあなたはあまりにも多くのdownvotedを得たか分かりません。 @Componentは、私のために（ビューを生成するための）テンプレートを持つディレクティブです。 - Harry Ninh

Angular 2以上では、 "すべてがコンポーネントです。"   ページ上の要素とロジックを構築して指定する主な方法は、   機能を追加するカスタム要素と属性の両方を介して   既存のコンポーネント。

http://learnangular2.com/components/

しかし、Angular2 +ではどのような指示が行われますか？

属性ディレクティブは、動作を要素に付加します。

Angularには3種類の指示があります：

1. コンポーネント - ディレクティブとテンプレート。
2. 構造指令の変更   DOM要素の追加と削除によるDOMレイアウト
3. 属性ディレクティブ - 要素の外観や動作を変更したり、   コンポーネント、または別のディレクティブです。

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

Angular2以上で何が起こっているのですか？指令に機能を追加する属性です要素そしてコンポーネント。

Angular.ioの下のサンプルを見てください：

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

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

それでは、コンポーネントとHTML要素を黄色の背景を追加して拡張し、次のように使用することができます：

<p myHighlight>Highlight me!</p>

しかし、コンポーネントは、以下のようなすべての機能を備えた完全な要素を作成します。

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

あなたは以下のようにそれを使うことができます：

<my-component></my-component>

HTMLでタグを使用すると、このコンポーネントが作成され、コンストラクタが呼び出されてレンダリングされます。

変化の検出

のみ@Component変更検出ツリー内のノードにすることができます。これは、あなたが設定できないことを意味しますChangeDetectionStrategy.OnPush〜で@Directive。この事実にもかかわらず、指令は、@Inputそして@Outputホストコンポーネントの注入と操作が可能ですChangeDetectorRefそれから。したがって、変更検出ツリーを細かく制御する必要がある場合は、コンポーネントを使用します。

プログラミングの文脈では、ディレクティブはコンパイラが入力を処理する方法、つまり何らかの動作を変更する方法を変更するための指示をコンパイラに提供します。

"ディレクティブを使用すると、DOM内の要素に動作を割り当てることができます。"

ディレクティブは3つのカテゴリに分割されます。

• 属性
• 構造
• 成分

はい、角2では、コンポーネントはディレクティブの一種です。 Docによると、

角型コンポーネントはディレクティブのサブセットです。ディレクティブとは異なり、コンポーネントには常にテンプレートがあり、テンプレート内の要素ごとに1つのコンポーネントしかインスタンス化できません。

角度2のコンポーネントは、Webコンポーネント概念。 Webコンポーネントは、いくつかの独立した技術で構成されていますWebコンポーネントは、オープンなWebテクノロジーを使用して作成された再利用可能なユーザーインターフェイスウィジェットと考えることができます。

• だから要約指示書に添付する仕組み動作DOMの要素には、Structural、 属性とコンポーネントのタイプ。
• コンポーネントとは、特定のタイプのディレクティブで、 利用するWebコンポーネントの機能AKAの再利用性 - カプセル化された、再利用可能な要素があります。

あなたが正式な角度のドキュメントを参照する場合

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

Angularには3種類の指示があります：

1. コンポーネント - ディレクティブとテンプレート。
2. 構造ディレクティブ - DOM要素を追加および削除してDOMレイアウトを変更します。例：* ngIf
3. 属性ディレクティブ - 要素、コンポーネント、または別のディレクティブの外観や動作を変更します。例：[ngClass]

アプリケーションが大きくなるにつれて、これらのコードをすべて維持することが困難になります。再利用性のために、私たちはスマートコンポーネントとダムコンポーネントでロジックを分離し、DOMの変更にディレクティブ（構造または属性）を使用します。