ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

Angular で構造ディレクティブを使用するにはどうすればよいですか?

著者：Eve Cole 更新時間：2023-04-04 10:28:14

この記事では、Angular の構造ディレクティブ パターンについて説明し、構造ディレクティブとは何か、その使用方法を紹介します。お役に立てば幸いです。

63036ae8287d7167.jpg

フロントエンド (vue) マスタリーコースへのエントリー: ラーニングに入る

Angularには 2 種類のディレクティブがあります。属性ディレクティブは、 DOM要素の外観または動作を変更します。構造ディレクティブは、 DOM要素を追加または削除します。

構造ディレクティブはAngularの最も強力な機能の 1 つですが、よく誤解されています。

構造ディレクティブについて学ぶことに興味がある場合は、構造ディレクティブが何であるか、何に使用されるか、プロジェクトでどのように使用するかを読み進めてみましょう。 【おすすめ関連チュートリアル：「angularチュートリアル」】

何を学ぶのか

この記事では、 Angular構造ディレクティブ パターンについて学びます。それらが何であるか、そしてそれらをどのように使用するかがわかります。

この記事を読んだ後は、これらの手順をより深く理解し、実際のプロジェクトで使用できるようになります。

Angular 構造ディレクティブとは何ですか?

Angular構造ディレクティブはDOMの構造を変更できるディレクティブです。これらの命令添加、移除或者替换元素できます。構造ディレクティブには、名前の前に*記号が付いています。

Angularには、3 つの標準構造化ディレクティブがあります。

  • *ngIf - 式によって返されたブール値に基づいてテンプレートを条件付きで含めます (つまり、テンプレートの条件付きレンダリング)

  • *ngFor - 配列を反復処理します

  • *ngSwitch - 一致する各グラフをレンダリングします。

以下は構造化されたディレクティブの例です。構文は次のようになります。

 <要素 ng-if="条件"></要素>

条件文はtrueまたはfalseである必要があります。

 <div *ngIf="worker" class="name">{{worker.name}}</div>

Angular <ng-template>要素を生成し、 *ngIfディレクティブを適用します。これにより、 [ngIf]などの角括弧[]内のプロパティ バインディングに変換されます。クラス名を含む<div>の残りの部分は、 <ng-template>に挿入されます。例えば：

 <ng-template [ngIf]="ワーカー">
<div class="name">{{worker.name}}</div>
</ng-template>

Angular の構造ディレクティブはどのように機能しますか?

構造ディレクティブを使用するには、 HTMLテンプレートにディレクティブを持つ要素を追加する必要があります。次に、ディレクティブで設定した条件または式に基づいて要素を追加、削除、または置換します。

構造ディレクティブの例

簡単なHTMLコードを追加してみましょう。

app.component.htmlファイルの内容は次のとおりです。

 <div style="text-align:center">
<h1>
いらっしゃいませ
</h1>
</div>
<h2> <アプリのイラスト></アプリのイラスト></h2>

*ngIfディレクティブの使用方法

*ngIf使用して、条件に基づいて要素を表示するか削除するかを決定します。 ngIfはif-elseに非常に似ています。

*ngIfディレクティブは、式がfalseの場合にHTML要素を削除します。 trueの場合、要素のコピーがDOMに追加されます。

完全な*ngIfコードは次のとおりです。

 <h1>
	<button (click)="toggleOn =!toggleOn">ng-if の図</button>
</h1>
<div *ngIf="!toggleOn">
<h2>こんにちは</h2>
<p>おはようございます。表示するにはボタンをクリックしてください</p>
</div>
<時間>
<p>今日は月曜日です。これは気分を良くするためのダミーのテキスト要素です。</p>
<p>else 句を含む ngIf ディレクティブを理解する</p>

*ngForディレクティブの使用方法

*ngForディレクティブを使用して配列を反復処理します。例えば：

 <ul>

<li *ngFor="従業員の中華鍋を作ろう">{{ 中華鍋 }}</li>

</ul>

コンポーネントのTypeScriptファイル:

 import { Component, OnInit } から '@angular/core';

@成分（{
セレクター: 'アプリのイラスト',
templateUrl: './illustrations.component.html',
styleUrls: ['./illustrations.component.css']
})
エクスポート クラス IllustrationsComponent は OnInit {を実装します。
労働者: 任意 = [

「作業者 1」、

「ワーカー 2」、

「ワーカー 3」、

「ワーカー 4」、

「ワーカー 5」、

】

コンストラクター() { }

ngOnInit(): void {
}

}

*ngSwitchディレクティブの使用方法

翻訳者が追加: このコマンドは実際の開発で非常に役立ちます

ngSwitch使用して、さまざまな条件ステートメントに基づいてどの要素をレンダリングするかを決定します。 *ngSwitchディレクティブは、使用するswitchステートメントと非常によく似ています。例えば：

 <div [ngSwitch]="マイショッピング">
<p *ngSwitchCase="'cups'">カップ</p>
<p *ngSwitchCase="'veg'">野菜</p>
<p *ngSwitchCase="'clothes'">ズボン</p>
<p *ngSwitchDefault>マイ ショッピング</p>
</div>

typescriptの場合:

マイショッピング: 文字列 = '';

MyShopping変数にはデフォルト値があり、条件を満たすモジュール内の特定の要素をレンダリングするために使用されます。

条件値がtrueの場合、関連する要素がDOMにレンダリングされ、残りの要素は無視されます。一致する要素がない場合は、 *ngSwitchDefault要素がDOMにレンダリングされます。

Angular で構造ディレクティブを使用する必要があるのはどのような場合ですか?

DOMに要素を追加または削除する場合は、構造ディレクティブを使用する必要があります。 もちろん、これらを使用して要素のCSSスタイルを変更したり、イベント リスナーを追加したりすることもできます。それらを使用して、以前は存在しなかった新しい要素を作成することもできます。

最良のルールは、 DOM の操作を考えているときは、構造ディレクティブを使用するということです。

要約する

構造ディレクティブはAngularの重要な部分であり、さまざまな方法で使用できます。

この記事を通じて、読者がこれらの命令の使用方法とこれらのモードをいつ使用するかをよりよく理解できることを願っています。

関連記事