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

回答:

105

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

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

成分

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

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

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

<my-app></my-app>

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

構造指令

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

属性ディレクティブ

これらは、いくつかの関数/ロジックを適用することにより、既存の要素にカスタムの動作またはスタイルを与えるために使用されます。LikengStyleは、要素に動的にスタイルを与える属性ディレクティブです。独自のディレクティブを作成し、これをいくつかの定義済み要素またはカスタム要素の属性として使用できます。単純なディレクティブの例を次に示します。

まず、からディレクティブをインポートする必要があります @angular/core

import {Directive, ElementRef, Renderer, Input} from '@angular/core';

@Directive({
  selector: '[Icheck]',
})
export class RadioCheckbox {
   // custom logic here...
}

以下に示すように、ビューでこれを使用できます。

<span Icheck>HEllo Directive</span>

詳細については、こことここで公式チュートリアルを読むことができます

— Pardeep Jain
ソース
「router-outlet」ディレクティブはどの種類ですか？上記の3つのタイプのいずれにもIMOとは一致しません。
— user2516186 2018
1
ここに良いチュートリアルがあります：dev6.com/angular/angular-2-the-three-types-of-directives
— Flames
64

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

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

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

— GünterZöchbauer
ソース
7

Günterが言ったことを完了するために、2種類のディレクティブを区別できます。

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

それがあなたを助けることを願っています、ティエリー

— ティエリーテンプリエ
ソース
2
属性ディレクティブの目的はわかりません。彼らはCSS以外に何を提供していますか？
— ティムマクナマラ2016年
3
@ TimMcNamara、Angularディレクティブはロジック/メソッドを持つことができるため、CSSだけの場合よりも属性ディレクティブの方が多くのことができます。親プロパティ値を属性ディレクティブに渡して、そのプロパティ値に基づいて要素を表示したり、動作を変えたりすることができます。
— Mark Rajcok 2016年
ここで良い例を見つけることができます：angular.io/docs/ts/latest/guide/attribute-directives.html
— Joris Brauns
6

これが実際の定義です。

  • テンプレートがある場合、それはコンポーネントです
  • それ以外の場合、角かっこ「[likethis]」で囲まれたセレクターがある場合は、属性ディレクティブです。
  • それ以外の場合は、構造ディレクティブです。

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

— ジョン・ヘンケル
ソース
3

概要：

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

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

例：

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>要素に配置され、要素を挿入するかどうかを決定します。<div>条件付き式がかどうかに応じて表示されますmyBoolに強制変換することができますtrue。
— Willem van der Veen
ソース
2

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

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

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

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

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

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

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

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

— マラテシュパティル
ソース
0

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

属性ディレクティブ：

属性ディレクティブは、単一の要素の動作または外観を変更できるクラスです。属性ディレクティブを作成する@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>

コンポーネント：

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

テンプレートの重要性を過小評価するのは簡単ですが、属性と構造ディレクティブには制限があります。ディレクティブは便利で強力な作業を行うことができますが、適用される要素についてはあまり洞察がありません。ディレクティブは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の本から

— fgul
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.