ホームページ >ウェブフロントエンド >jsチュートリアル >Angular の構造ディレクティブとは何ですか?使い方？
Angular の構造ディレクティブとは何ですか?使い方？
- 青灯夜游転載
- 2022-08-24 19:27:301615ブラウズ
この記事では、Angular の構造命令モードを理解し、構造命令とは何か、その使い方を紹介します。
Angular には 2 種類のディレクティブがあります。 属性ディレクティブDOM要素の外観または動作を変更します。 構造ディレクティブDOM要素を追加または削除します。
構造ディレクティブは Angular の最も強力な機能の 1 つですが、よく誤解されています。
構造ディレクティブの学習に興味がある場合は、読み続けて、それらが何であるか、何に使用されるか、プロジェクトでどのように使用するかを理解しましょう。 [関連チュートリアルの推奨事項: "angular チュートリアル"]
何を学ぶか
この記事では、Angular について学びます 構造指示パターンの知識ポイント。それらが何であるか、そしてそれらをどのように使用するかがわかります。
Angular 構造ディレクティブとは何ですか?
Angular 構造ディレクティブは、DOM の構造を変更するディレクティブです。これらの命令では、要素の追加、削除、または置換を行うことができます。構造ディレクティブには、名前の前に #* 記号が付いています。
Angular には、3 つの標準構造化ディレクティブがあります。
- *ngIf
- 式 - *ngFor# によって返されるブール値に基づいて、テンプレート (つまり、条件付きレンダリング テンプレート) を条件付きで含めます # # - 配列を走査します
- - 一致する各グラフをレンダリングします
<element ng-if="Condition"></element>
条件ステートメントは
true または false である必要があります。 <pre class="brush:php;toolbar:false"><div *ngIf="worker" class="name">{{worker.name}}</div></pre>
<ng-template> を使用して要素を生成し、*ngIf ディレクティブを適用します。これにより、[ngIf] など、角かっこ [] で囲まれたプロパティ バインディングに変換されます。クラス名を含む <div> の残りの部分は、<ng-template> に挿入されます。例: <pre class="brush:php;toolbar:false"><ng-template [ngIf]="worker">
<div class="name">{{worker.name}}</div>
</ng-template></pre>
構造ディレクティブを使用するには、
HTML テンプレートにディレクティブを持つ要素を追加する必要があります。次に、ディレクティブで設定した条件または式に基づいて要素を追加、削除、または置換します。
簡単な
HTML コードを追加します。
ファイルの内容は次のとおりです。 <pre class="brush:php;toolbar:false"><div style="text-align:center">
<h1>
Welcome
</h1>
</div>
<h2> <app-illustrations></app-illustrations></h2></pre>
*ngIf コマンドの使用方法
*ngIf を使用して、条件に基づいて要素を表示するか削除するかを決定します。 ngIf は if-else に非常に似ています。
ディレクティブは、式が false の場合に HTML 要素を削除します。 true の場合、要素のコピーが DOM に追加されます。 完全な
コードは次のとおりです: <pre class="brush:php;toolbar:false"><h1>
<button (click)="toggleOn =!toggleOn">ng-if illustration</button>
</h1>
<div *ngIf="!toggleOn">
<h2>Hello </h2>
<p>Good morning to you,click the button to view</p>
</div>
<hr>
<p>Today is Monday and this is a dummy text element to make you feel better</p>
<p>Understanding the ngIf directive with the else clause</p></pre>
*ngFor コマンドの使用方法
*ngFor ディレクティブを使用して、配列を反復処理します。例: <pre class="brush:php;toolbar:false"><ul>
<li *ngFor="let wok of workers">{{ wok }}</li>
</ul></pre>私たちのコンポーネント
ファイル:<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>
*ngSwitch コマンド
トランスレータの追加: このコマンドは実際の開発で非常に役立ちますngSwitch
を使用して、さまざまな条件ステートメントに基づいてどの要素をレンダリングするかを決定します。 *ngSwitch ディレクティブは、使用する switch ステートメントと非常によく似ています。例: <pre class="brush:php;toolbar:false"><div [ngSwitch]="Myshopping">
<p *ngSwitchCase="&#39;cups&#39;">cups</p>
<p *ngSwitchCase="&#39;veg&#39;">Vegetables</p>
<p *ngSwitchCase="&#39;clothes&#39;">Trousers</p>
<p *ngSwitchDefault>My Shopping</p>
</div></pre>
: <pre class="brush:php;toolbar:false">Myshopping: string = '';</pre> モジュールの特定の要素でレンダリングするためのデフォルト値を持つ
変数があります。条件を満たすものです。 条件値が
の場合、関連する要素は DOM にレンダリングされ、残りの要素は無視されます。一致する要素がない場合、*ngSwitchDefault の要素が DOM にレンダリングされます。
DOM
に要素を追加または削除する場合は、struct ディレクティブを使用する必要があります。もちろん、これらを使用して要素 CSS スタイルを変更したり、イベント リスナーを追加したりすることもできます。それらを使用して、以前は存在しなかった新しい要素を作成することもできます。 最良のルールは次のとおりです。
。 構造ディレクティブは この記事を通じて、読者がこれらの命令の使用方法とこれらのモードをいつ使用するかをよりよく理解できることを願っています。 この記事は意訳による翻訳です。 元のアドレス: https://www.freecodecamp.org/news/angular-structural-directive-patterns-what-they-are-and-how-to-use-them/ プログラミング関連の知識については、プログラミング ビデオをご覧ください。 ！ 概要
Angular の重要な部分であり、さまざまな方法で使用できます。
以上がAngular の構造ディレクティブとは何ですか?使い方？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。