[解決済み] Angularの@Directiveと@Componentの比較

質問

とはどのような違いがあるのでしょうか？ @Component と @Directive をAngularで使うことはできますか？ どちらも同じタスクで、同じ属性を持っているように見えます。

どのようなケースで、どのような場合に、どちらを選ぶべきでしょうか？

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

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

ディレクティブ

<ストライク 私は@DirectiveをAngular 1.0のディレクティブになぞらえて、オプションとして restrict: 'A' (ディレクティブは属性の使用に限定されません。) ディレクティブは、既存のDOM要素または既存のコンポーネントインスタンスに動作を追加します。ディレクティブの使用例としては、要素のクリックを記録することが挙げられます。

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 要素を補完する再利用可能な振る舞いを書きたい場合は、ディレクティブを書きます。

ソースはこちら

• ディレクティブのドキュメント
• コンポーネントに関する文書
• お役立ちブログ記事