Angularの@ディレクティブと@コンポーネント

違いは何である@Componentと@Directive角度では？どちらも同じタスクを実行し、同じ属性を持っているようです。

ユースケースとは何ですか？

@Componentではビューが必要ですが、@ Directiveでは必要ありません。

ディレクティブ

私は@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要素を補足する再利用可能な動作を記述したい場合は、ディレクティブを記述します。

出典：

• @Directiveのドキュメント
• @コンポーネントのドキュメント
• 役立つブログ投稿

部品

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

指令

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

出典：

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

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

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つのカテゴリに分けられます。

• 属性
• 構造的
• 成分

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

「角度コンポーネントはディレクティブのサブセットです。ディレクティブとは異なり、コンポーネントには常にテンプレートがあり、テンプレートの要素ごとにインスタンス化できるコンポーネントは1つだけです。」

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

• したがって、要約ディレクティブでは、構造、属性、およびコンポーネントタイプで構成される、DOMの要素に動作をアタッチするメカニズム。
• コンポーネントは特定のタイプのディレクティブであり、Webコンポーネントの機能、つまり再利用性-アプリケーション全体で利用できるカプセル化された再利用可能な要素を利用できるようにします。

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

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

Angularには3種類のディレクティブがあります：

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

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

部品

コンポーネントは、Angularアプリの最も基本的なUI構築ブロックです。Angularアプリには、Angularコンポーネントのツリーが含まれています。Angularでのアプリケーションは、コンポーネントツリーに基づいて構築されています。すべてのコンポーネントにはテンプレート、スタイリング、ライフサイクル、セレクターなどが必要です。したがって、すべてのコンポーネントには構造があります。独自のテンプレートとロジックを備えた独立した小さなWebアプリケーションとして扱うことができ、他のコンポーネントと通信して使用する可能性があります。コンポーネント。

コンポーネントのサンプル.tsファイル：

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

とその./app.component.htmlテンプレートビュー：

Hello {{title}}

次に、AppTrainingComponentテンプレートを他のコンポーネントのロジックと共にレンダリングします（モジュールに追加した後）。

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

そして結果は

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

ここでAppTrainingComponentがレンダリングされたため

コンポーネントの詳細を見る

ディレクティブ

ディレクティブは、既存のDOM要素の外観または動作を変更します。たとえば、[ngStyle]はディレクティブです。ディレクティブはコンポーネントを拡張できます（コンポーネント内で使用できます）が、アプリケーション全体を構築するわけではありません。コンポーネントをサポートしているとしましょう。独自のテンプレートはありません（もちろん、テンプレートを操作することもできます）。

サンプルディレクティブ：

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

そしてその使用法：

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

ディレクティブの詳細を見る