Angularでの@Directiveと@Component

463
Prasanjit Dey 2015-09-21 04:03.

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

ユースケースは何ですか?また、いつ他よりも優先するのですか?

8 answers

571
jaker 2015-09-21 06:39.

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

指令

@Directiveをオプション付きのAngular1.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要素を補足するために再利用可能な動作を記述したい場合は、ディレクティブを記述します。

出典:

81
virender 2016-01-09 00:20.

コンポーネント

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

指令

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

出典:

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

66
yusuf tezel 2016-04-22 02:06.

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

22
Alireza 2017-04-16 16:16.

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でタグを使用すると、このコンポーネントが作成され、コンストラクターが呼び出されてレンダリングされます。

7
Evgeniy Malyutin 2018-03-30 18:51.

変化の検出

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

6
Sachila Ranawaka 2018-07-04 02:49.

プログラミングのコンテキストでは、ディレクティブはコンパイラにガイダンスを提供して、他の方法で入力を処理する方法を変更します。つまり、動作を変更します。

「ディレクティブを使用すると、DOM内の要素に動作をアタッチできます。」

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

  • 属性
  • 構造
  • 成分

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

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

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

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

公式のAngularドキュメントを参照する場合

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

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

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

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

2
Przemek Struciński 2019-08-30 21:02.

コンポーネント

コンポーネントは、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>

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

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

Westworldの遊び方:Amazonエコーのない迷路

Westworldの遊び方:Amazonエコーのない迷路

Westworldの第2シーズンが終わり、次の1、2年は楽しいがやや混乱するシリーズでモーター機能が凍結するので、次に何をすべきかについて少し迷うかもしれません。ビンジウォッチングする別の番組を見つけますか?さらに多くのファン理論を読み直しますか?お気に入りの1990年代のオルタナティブロックソングの楽しいオールドタイムの​​ピアノカバーを書き始めますか?心配しないでください。長い待ち時間が始まる前に、Westworldのヒットをもう1つ得ることができます。

ジャネールモネイは彼女のプライドで周りをファックしませんでしたBETアワードを見てください

ジャネールモネイは彼女のプライドで周りをファックしませんでしたBETアワードを見てください

2018 BETアワードは、日曜日の夜にロサンゼルスで開催されました。プライド月の真ん中に軽くたたきます。見た目はいたるところに強かったが、ジャネール・モネイのように誰もそれをしなかった。

リットウッドで2000年代と2010年代の車を祝うために2038年に会いましょう

リットウッドで2000年代と2010年代の車を祝うために2038年に会いましょう

他の期間をテーマにした自動車展示会、特に1980年代と90年代の自動車ショーRadwoodの最近の成功に続いて、私は2000年代と2010年代の自動車文化を祝う自動車ショーであるLitwoodを立ち上げることにしました。私は今これについてディブを呼んでいます。

リチャードは堅実なシリコンバレーで彼の会社の将来のためにビットコインを裏返します

リチャードは堅実なシリコンバレーで彼の会社の将来のためにビットコインを裏返します

数週間前のシリコンバレーの第5シーズンのプレミアのレビューで、ショーはその高齢で問題を抱え続けていますが、才能のあるキャストとそのひねくれたユーモアのセンスを備えた頑丈な基盤からまだ機能していると主張しました。そして、シーズンの終わりに近づくにつれて、その点は持ちこたえてきました。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language