質問

Angular 2を使い始めたところです。

Angular 2のコンポーネントとディレクティブの違いは何なのかと思っていました。

どのように解決するのですか？

ドキュメントによると、Angular2には基本的に3つのタイプのディレクティブがあります。

• コンポーネント
• 構造的なディレクティブ
• 属性ディレクティブ

コンポーネント

テンプレート、スタイル、ロジック部分を持つディレクティブで、Angular2のディレクティブの中で最も有名なタイプです。このタイプのディレクティブでは、カスタム、ビルトインに関わらず、他のディレクティブを @Component アノテーションの中で使うことができます。

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

として、このディレクティブをビューで使用します。

<my-app></my-app>

コンポーネントディレクティブについては、以下のチュートリアルを参照してください。 はこちらです。

構造的なディレクティブ

例えば *ngFor と *ngIf は、DOM要素を追加したり削除したりして、DOMレイアウトを変更するために使用されます。 の説明はこちら

属性ディレクティブ

これらは、既存の要素に何らかの関数や論理を適用することで、独自の動作やスタイルを与えるために使用されます。例えば ngStyle は、要素に動的にスタイルを与えるための属性ディレクティブです。私たちは、独自のディレクティブを作成し、いくつかの定義済みまたはカスタム要素の属性としてこれを使用することができます、ここでは単純なディレクティブの例です。

まず最初に、ディレクティブを @angular/core

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

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

これをビューで使うと、以下のようになります。

<span Icheck>HEllo Directive</span>

より詳細な情報は、公式チュートリアルの はこちら および はこちら