ホームページ >ウェブフロントエンド >jsチュートリアル >Angular の構造ディレクティブとは何ですか?使い方?
この記事では、Angular の構造命令モードを理解し、構造命令とは何か、その使い方を紹介します。
Angular
には 2 種類のディレクティブがあります。 属性ディレクティブDOM
要素の外観または動作を変更します。 構造ディレクティブDOM
要素を追加または削除します。
構造ディレクティブは Angular
の最も強力な機能の 1 つですが、よく誤解されています。
構造ディレクティブの学習に興味がある場合は、読み続けて、それらが何であるか、何に使用されるか、プロジェクトでどのように使用するかを理解しましょう。 [関連チュートリアルの推奨事項: "angular チュートリアル"]
Angular について学びます 構造指示パターンの知識ポイント。それらが何であるか、そしてそれらをどのように使用するかがわかります。
Angular 構造ディレクティブは、
DOM の構造を変更するディレクティブです。これらの命令では、
要素の追加、削除、または置換を行うことができます。構造ディレクティブには、名前の前に
#* 記号が付いています。
Angular には、3 つの標準構造化ディレクティブがあります。
- 式
<element></element>
条件ステートメントは
true または false
である必要があります。 <pre class="brush:php;toolbar:false"><div>{{worker.name}}</div></pre>
テンプレートにディレクティブを持つ要素を追加する必要があります。次に、ディレクティブで設定した条件または式に基づいて要素を追加、削除、または置換します。 コードを追加します。 ファイルの内容は次のとおりです。 を使用して、条件に基づいて要素を表示するか削除するかを決定します。 ディレクティブは、式が コードは次のとおりです: ディレクティブを使用して、配列を反復処理します。例: ファイル: を使用して、さまざまな条件ステートメントに基づいてどの要素をレンダリングするかを決定します。 : 変数があります。条件を満たすものです。 の場合、関連する要素は に要素を追加または削除する場合は、struct ディレクティブを使用する必要があります。もちろん、これらを使用して要素 。 構造ディレクティブは この記事を通じて、読者がこれらの命令の使用方法とこれらのモードをいつ使用するかをよりよく理解できることを願っています。 この記事は意訳による翻訳です。 元のアドレス: https://www.freecodecamp.org/news/angular-structural-directive-patterns-what-they-are-and-how-to-use-them/ プログラミング関連の知識については、プログラミング ビデオをご覧ください。 ! <ng-template></ng-template>
を使用して要素を生成し、*ngIf
ディレクティブを適用します。これにより、[ngIf]
など、角かっこ []
で囲まれたプロパティ バインディングに変換されます。クラス名を含む <ng-template></ng-template>
に挿入されます。例: <pre class="brush:php;toolbar:false"><ng-template>
<div>{{worker.name}}</div>
</ng-template></pre>
Angular の構造ディレクティブはどのように機能しますか?
構造ディレクティブを使用するには、
HTML
簡単な
HTML<pre class="brush:php;toolbar:false"><div>
<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>ng-if illustration</button>
</h1>
<div>
<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 us
<pre class="brush:php;toolbar:false"></pre>
<ul>
<li>{{ wok }}</li>
</ul>
私たちのコンポーネント<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>
<p>cups</p>
<p>Vegetables</p>
<p>Trousers</p>
<p>My Shopping</p>
</div></pre>
<pre class="brush:php;toolbar:false">Myshopping: string = '';</pre>
モジュールの特定の要素でレンダリングするためのデフォルト値を持つ 条件値が
DOM
にレンダリングされ、残りの要素は無視されます。一致する要素がない場合、*ngSwitchDefault
の要素が DOM
にレンダリングされます。 DOM
CSS
スタイルを変更したり、イベント リスナーを追加したりすることもできます。それらを使用して、以前は存在しなかった新しい要素を作成することもできます。 最良のルールは次のとおりです。
概要
Angular
の重要な部分であり、さまざまな方法で使用できます。
以上がAngular の構造ディレクティブとは何ですか?使い方?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。