90

Angular 2 を使い始めたばかりです。

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

4

7 に答える 7

8

ギュンターが言ったことを完了するために、2 種類のディレクティブを区別できます。

お役に立てば幸いです、ティエリー

于 2016-01-05T13:53:18.847 に答える
3

概要：

コンポーネントは、関連付けられたビュー (つまり、レンダリングされる HTML) を持つディレクティブです。すべてのコンポーネントはディレクティブですが、すべてのディレクティブがコンポーネントというわけではありません。ディレクティブには次の 3 種類があります。

  • Component : 動作が関連付けられたビュー。このタイプのディレクティブは実際に 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>かどうかに応じて、条件付きで表示されます。myBooltrue
于 2018-11-08T21:27:35.643 に答える
2

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

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

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

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

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

他の 2 つのディレクティブは次のとおりです。

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

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

于 2017-06-02T09:06:36.290 に答える