☰

Angular の @Directive と @Component の違い 質問する

tag-icon • tag-icon angular typescript
Angular の @Directive と @Component の違い 質問する

@ComponentAngular のとの違いは何ですか@Directive? どちらも同じタスクを実行し、同じ属性を持っているようです。

使用例は何ですか? また、どちらを優先すべきですか?

ベストアンサー1

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

出典:

おすすめ記事