ディレクティブ は、DOM の動作を追加または要素を変更するクラスです。Angular には 3 つのタイプがあります: コンポーネント (テンプレートを持つディレクティブ)、構造ディレクティブ (DOM レイアウトを変更)、属性ディレクティブ (外観/動作を変更)。
構造ディレクティブ — DOM 構造を変更する
これらは要素を追加または削除し、* が前に付きます:
html
<p *ngIf="isLoggedIn">Welcome back!</p> <!-- add/remove based on condition -->
<li *ngFor="let item of items; let i = index"> <!-- repeat an element per item -->
{{ i }}: {{ item.name }}
</li>
<div [ngSwitch]="status">
<p *ngSwitchCase="'active'">Active</p>
<p *ngSwitchDefault>Unknown</p>
</div>
(モダン Angular では、*ngIf/*ngFor の代わりになる新しい @if / @for 制御フロー構文も提供しています。)
要素を追加または削除せずに既存の要素を変更します:
<div [ngClass]="{ active: isActive, error: hasError }">...</div> <!-- toggle classes -->
<div [ngStyle]="{ color: textColor }">...</div> <!-- dynamic styles -->
<input [(ngModel)]="name" /> <!-- two-way binding -->
import { Directive, ElementRef, HostListener } from "@angular/core";
@Directive({ selector: "[appHighlight]" }) // used as <p appHighlight>
export class HighlightDirective {
constructor(private el: ElementRef) {}
@HostListener("mouseenter") onEnter() {
this.el.nativeElement.style.background = "yellow"; // change the host element
}
@HostListener("mouseleave") onLeave() {
this.el.nativeElement.style.background = "";
}
}
カスタムディレクティブはホスト要素への参照を取得でき、イベントに反応できます — ここではホバー時のハイライトです。<p appHighlight>Text</p> のように使用されます。
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
* は要素を <ng-template> でラップするための省略記法です — だからこそ構造ディレクティブは要素を完全に追加/削除できるのです。
ディレクティブは、Angular が DOM を宣言的に操作する方法です。
組み込みの構造ディレクティブ (*ngIf/*ngFor/@if/@for) と属性ディレクティブ (ngClass/ngStyle/ngModel) はほとんどのニーズをカバーしており、カスタムディレクティブを使用すると再利用可能な DOM 動作 (ハイライト、ツールチップ、click-outside) をカプセル化できます。
3 つのカテゴリーを理解する — そしてコンポーネント自体がテンプレートを持つディレクティブであることを理解する — ことは Angular テンプレートモデルの核となります。
ジュニアからシニアまで、詳細な回答付きのIT面接質問ライブラリ。
寄付する