web-dev-qa-db-ja.com

@ディレクティブv/s @コンポーネントin Angular

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

ユースケースは何ですか。

javascriptangulartypescript
353
Prasanjit Dey

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

指令

@Directiveは、オプションrestrict: 'A'を持つAngular 1.0ディレクティブに似ています ディレクティブは、既存の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要素を補足するために再利用可能な振る舞いを書きたい場合は、ディレクティブを書きます。

出典：

449
jaker

コンポーネント

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

指令

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

出典：

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

65
virender

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

51
yusuf tezel

Angular 2以上では、「すべてがコンポーネント」です。コンポーネントは、既存のコンポーネントに機能を追加するカスタム要素と属性の両方を使用して、ページ上の要素とロジックを構築および指定する主な方法です。

http://learnangular2.com/components/ /

しかしAngular2 +では、どのような指示がありますか。

属性ディレクティブは動作を要素に結び付けます。

Angularには3種類の指令があります。

  1. コンポーネント - テンプレートを含むディレクティブ。
  2. 構造ディレクティブ - DOM要素を追加および削除してDOMレイアウトを変更します。
  3. 属性ディレクティブ - 要素、コンポーネント、または他のディレクティブの外観または動作を変更します。

https://angular.io/docs/ts/latest/guide/attribute-directives.html

ですからAngular 2以降で起こっているのは Directives です。 elements と components に機能性を追加する属性です。

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

21
Alireza

変化検出

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

6
Evgeniy Malyutin

プログラミングの文脈では、ディレクティブは、そうでなければ入力を処理する方法を変更する、つまり何らかの動作を変更するようにコンパイラにガイダンスを提供します。

「ディレクティブを使用すると、DOM内の要素に動作を関連付けることができます。」

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

  • 属性
  • 構造的
  • 成分

はい、Angular 2では、ComponentsはDirectiveの一種です。 Docによると、

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

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

  • だから要約したところで私たちがDOM内の要素に behavior を付けるメカニズムで、構造型、属性型、コンポーネント型からなる。
  • コンポーネントは、アプリケーション全体で利用可能な Webコンポーネント機能 AKAの再利用性 - カプセル化された再利用可能な要素を利用できるようにする特定の種類のディレクティブです。
4
Sachila Ranawaka

公式の角度付きドキュメントを参照するなら

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

Angularには3種類の指令があります。

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

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

1
Akshay Rajput

コンポーネント

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

ディレクティブの詳細 を参照してください

0
Przemek Struciński