web-dev-qa-db-ja.com

コンポーネントとディレクティブの違いは何ですか？

Angularの作業を始めたばかりです2。

Angular 2のコンポーネントとディレクティブの違いは何ですか？

angularcomponentsdirective
70
uksz

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

  • 成分
  • 構造指令
  • 属性ディレクティブ

成分

また、Angular2の中で最も有名なタイプのディレクティブである、テンプレート、スタイル、およびロジック部分を持つディレクティブのタイプでもあります。このタイプのディレクティブでは、次のようなカスタムディレクティブまたは@Componentアノテーションに組み込まれている他のディレクティブを使用できます。

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

ビューでこのディレクティブを次のように使用します。

<my-app></my-app>

コンポーネントディレクティブについては、最高のチュートリアルを見つけました こちら

構造指令

*ngForや*ngIfと同様、DOM要素を追加および削除してDOMレイアウトを変更するために使用されます。 ここで説明

属性ディレクティブ

これらは、いくつかの関数/ロジックを適用することにより、既存の要素にカスタム動作またはスタイルを与えるために使用されます。 Like 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>

詳細については、公式チュートリアル here および here をご覧ください。

88
Pardeep Jain

コンポーネントには独自のビュー（HTMLおよびスタイル）があります。ディレクティブは、既存の要素とコンポーネントに追加される「動作」にすぎません。
ComponentはDirectiveを拡張します。

そのため、Host要素には1つのコンポーネントしか存在できませんが、複数のディレクティブがあります。

構造ディレクティブは、<template>要素に適用され、コンテンツの追加/削除（テンプレートのスタンプ）に使用されるディレクティブです。 *のようなディレクティブアプリケーションの*ngIfにより、<template>タグが暗黙的に作成されます。

58
Günter Zöchbauer

ギュンターが言ったことを完了するために、2種類の指令を区別できます。

  • 構造的なもの 要素を追加または削除してDOMレイアウトを更新します。 2つの一般的なものはNgForとNgIfです。これらはテンプレートの概念にリンクされており、*を前に付ける必要があります。詳細については、このリンクの「テンプレートと*」セクションを参照してください。 http://victorsavkin.com/post/119943127151/angular-2-template-syntax
  • 属性のもの は、それらが接続されている要素の外観の動作を更新します。

お役に立てばと思います、ティエリー

7
Thierry Templier

Angular 2は、アーキテクチャのコンポーネント/サービスモデルに従います。

angular 2アプリケーションはコンポーネントで構成されています。コンポーネントは、HTMLテンプレートと、画面の一部を制御するコンポーネントクラス（TypeScriptクラス）の組み合わせです。

良い習慣として、コンポーネントクラスはそれぞれのビューへのデータバインディングに使用されます。双方向データバインディングは、angularフレームワークによって提供される優れた機能です。

コンポーネントは、提供されたセレクター名を使用してアプリケーション全体で再利用できます。

コンポーネントは、テンプレートを持つディレクティブの一種でもあります。

他の2つのディレクティブは

  1. 構造ディレクティブ—DOM要素を追加および削除してDOMレイアウトを変更します。例：NgForおよびNgIf。

  2. 属性ディレクティブ-要素、コンポーネント、または別のディレクティブの外観または動作を変更します。例：NgStyle

2
Malatesh Patil

これが実際の定義です。

  • templateがある場合、それはComponentです
  • それ以外の場合、括弧内にセレクターがある場合 "[likethis]"、属性ディレクティブ
  • それ以外の場合は、構造ディレクティブです。

他の定義は間違っています。

2
John Henckel

概要：

コンポーネントは、関連付けられたビュー（つまり、レンダリングされるHTML）を持つディレクティブです。すべてのコンポーネントはディレクティブですが、すべてのディレクティブがコンポーネントではありません。ディレクティブには次の3つのタイプがあります。

  • コンポーネント：動作に関連付けられたビュー。このタイプのディレクティブは、実際にDOM要素を追加します
  • 属性ディレクティブ：DOM要素（およびDOM要素であるためコンポーネント）にアタッチして、要素の外観または動作を変更できます。
  • 構造ディレクティブ：DOM要素（およびDOM要素であるためコンポーネント）に添付して、DOMレイアウトを変更できます。構造ディレクティブは*で始まり、実際にDOM要素を追加または削除します。たとえば、DOM要素を挿入または削除できる*ngIf（またはカスタムDOM要素ですが、それでもDOM要素であるangularコンポーネント）。

例：

import { Component, HostListener, HostBinding, Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
 }
}

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf='myBool' appHighlight>Hi there</div>
  `,
  styleUrls: ['./app.component.scss'],
})
export class AppComponent  {

  myBool:boolean = true;

}

上記の例では、次のことを確認できます。

  • コンポーネントAppComponentには、表示される<div>要素を持つテンプレートがあります。
  • 属性ディレクティブHighlightDirectiveは、<div>要素にあります。これは、<div>要素の動作を操作することを意味します。この場合、テキストが強調表示され、黄色に変わります。
  • 構造ディレクティブ*ngIfも<div>要素にあり、要素を挿入するかどうかを決定します。式myBoolをtrueに強制できるかどうかに応じて、<div>が条件付きで表示されます。
1
Willem van der Veen

実際にはコンポーネントもディレクティブですが、違いがあります。

属性ディレクティブ：

属性ディレクティブは、単一の要素の動作または外観を変更できるクラスです。属性ディレクティブを作成するには、@Directiveをクラスに適用します。

import { Directive, ElementRef } from "@angular/core";

@Directive({
     selector: "[custom-attr]", })

export class CustomAttrDirective {

   constructor(element: ElementRef) {
      element.nativeElement.classList.add("bg-success", "text-white");    
   } 
}

ディレクティブ属性template.htmlファイルの追加

<tr *ngFor="let item of getProducts(); let i = index" custom-attr>
   <td>{{i + 1}}</td>
   <td>{{item.name}}</td>
</tr>

構造ディレクティブ：

構造ディレクティブは、マイクロテンプレートとして要素を追加および削除することにより、HTMLドキュメントのレイアウトを変更します。構造ディレクティブを使用すると、*ngIfなどの式の結果に基づいて条件付きでコンテンツを追加したり、*ngForなどのデータソース内の各オブジェクトに対して同じコンテンツを繰り返したりできます。

組み込みのディレクティブを一般的なタスクに使用できますが、カスタム構造ディレクティブを記述すると、アプリケーションに合わせて動作を調整できます。

<p *ngIf="true">
  Expression is true and ngIf is true.
  This paragraph is in the DOM.
</p>
<p *ngIf="false">
  Expression is false and ngIf is false.
  This paragraph is not in the DOM.
</p>

コンポーネント：

コンポーネントは、他の場所から提供されるコンテンツに依存するのではなく、独自のテンプレートのディレクティブです。コンポーネントはすべてのディレクティブ機能にアクセスでき、依然としてHost要素を持ち、入力および出力プロパティを定義できます。ただし、独自のコンテンツも定義します。

テンプレートの重要性を過小評価するのは簡単ですが、属性と構造ディレクティブには制限があります。ディレクティブは有用で強力な作業を行うことができますが、適用される要素についてはあまり洞察がありません。ディレクティブは、ngModelディレクティブなどの汎用ツールである場合に最も役立ちます。これは、データや要素の用途に関係なく、データモデルプロパティやフォーム要素に適用できます。

コンポーネントは、対照的に、テンプレートのコンテンツと密接に結びついています。コンポーネントは、テンプレート内のHTML要素に適用されるデータバインディングで使用されるデータとロジックを提供します。これは、データバインディング式を評価し、ディレクティブとアプリケーションの他の部分との間の接着剤として機能するコンテキストを提供します。コンポーネントは、大きなAngularプロジェクトを管理可能なチャンクに分割できる便利なツールでもあります。

import { Component, Input } from '@angular/core';

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

公式の角度から

Pro-Angularブックから

0
fgul