Angular の構造ディレクティブとは何ですか?使い方？

この記事では、Angular の構造命令モードを理解し、構造命令とは何か、その使い方を紹介します。

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

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

構造ディレクティブの学習に興味がある場合は、読み続けて、それらが何であるか、何に使用されるか、プロジェクトでどのように使用するかを理解しましょう。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

何を学ぶか

この記事では、

Angular について学びます 構造指示パターンの知識ポイント。それらが何であるか、そしてそれらをどのように使用するかがわかります。

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

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

Angular 構造ディレクティブは、DOM の構造を変更するディレクティブです。これらの命令では、要素の追加、削除、または置換を行うことができます。構造ディレクティブには、名前の前に #* 記号が付いています。

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

• *ngIf - 式
• *ngFor# によって返されるブール値に基づいて、テンプレート (つまり、条件付きレンダリング テンプレート) を条件付きで含めます # # - 配列を走査します
*ngSwitch
• - 一致する各グラフをレンダリングします
以下は、構造化ディレクティブの例です。構文は次のようになります。

 <element ng-if="Condition"></element>

条件ステートメントは

true

または false である必要があります。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div *ngIf=&quot;worker&quot; class=&quot;name&quot;&gt;{{worker.name}}&lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

Angular

<ng-template> を使用して要素を生成し、*ngIf ディレクティブを適用します。これにより、[ngIf] など、角かっこ [] で囲まれたプロパティ バインディングに変換されます。クラス名を含む <div> の残りの部分は、<ng-template> に挿入されます。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;ng-template [ngIf]=&quot;worker&quot;&gt;   &lt;div class=&quot;name&quot;&gt;{{worker.name}}&lt;/div&gt; &lt;/ng-template&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

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

構造ディレクティブを使用するには、

HTML

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

構造ディレクティブの例

簡単な

HTML

コードを追加します。

app.component.html

ファイルの内容は次のとおりです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div style=&quot;text-align:center&quot;&gt;   &lt;h1&gt;     Welcome    &lt;/h1&gt; &lt;/div&gt; &lt;h2&gt; &lt;app-illustrations&gt;&lt;/app-illustrations&gt;&lt;/h2&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

*ngIf コマンドの使用方法

*ngIf

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

*ngIf

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

*ngIf

コードは次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;h1&gt; &lt;button (click)=&quot;toggleOn =!toggleOn&quot;&gt;ng-if illustration&lt;/button&gt;   &lt;/h1&gt;   &lt;div *ngIf=&quot;!toggleOn&quot;&gt;   &lt;h2&gt;Hello &lt;/h2&gt;   &lt;p&gt;Good morning to you,click the button to view&lt;/p&gt;   &lt;/div&gt;   &lt;hr&gt;   &lt;p&gt;Today is Monday and this is a dummy text element to make you feel better&lt;/p&gt;   &lt;p&gt;Understanding the ngIf directive with the else clause&lt;/p&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

*ngFor コマンドの使用方法 us

*ngFor

ディレクティブを使用して、配列を反復処理します。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;ul&gt;     &lt;li *ngFor=&quot;let wok of workers&quot;&gt;{{ wok }}&lt;/li&gt; &lt;/ul&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>私たちのコンポーネント

TypeScript

ファイル:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">import { Component, OnInit } from '@angular/core'; @Component({   selector: 'app-illustrations',   templateUrl: './illustrations.component.html',   styleUrls: ['./illustrations.component.css'] }) export class IllustrationsComponent implements OnInit {   workers: any = [     'worker 1',     'worker 2',     'worker 3',     'worker 4',     'worker 5',   ]   constructor() { }   ngOnInit(): void {   } }</pre><div class="contentsignin">ログイン後にコピー</div></div>

使い方

*ngSwitch コマンド

トランスレータの追加: このコマンドは実際の開発で非常に役立ちます

ngSwitch

を使用して、さまざまな条件ステートメントに基づいてどの要素をレンダリングするかを決定します。 *ngSwitch ディレクティブは、使用する switch ステートメントと非常によく似ています。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div [ngSwitch]=&quot;Myshopping&quot;&gt;   &lt;p *ngSwitchCase=&quot;&amp;#39;cups&amp;#39;&quot;&gt;cups&lt;/p&gt;   &lt;p *ngSwitchCase=&quot;&amp;#39;veg&amp;#39;&quot;&gt;Vegetables&lt;/p&gt;   &lt;p *ngSwitchCase=&quot;&amp;#39;clothes&amp;#39;&quot;&gt;Trousers&lt;/p&gt;   &lt;p *ngSwitchDefault&gt;My Shopping&lt;/p&gt; &lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

typescript

: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Myshopping: string = '';</pre><div class="contentsignin">ログイン後にコピー</div></div> モジュールの特定の要素でレンダリングするためのデフォルト値を持つ

MyShopping

変数があります。条件を満たすものです。 条件値が

true

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

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

DOM

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

DOM の操作を考えているときは、構造ディレクティブを使用するときです

。

概要

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

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

この記事は意訳による翻訳です。

元のアドレス: https://www.freecodecamp.org/news/angular-structural-directive-patterns-what-they-are-and-how-to-use-them/

プログラミング関連の知識については、プログラミング ビデオをご覧ください。 ！

以上がAngular の構造ディレクティブとは何ですか?使い方？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。