ホームページ > 記事 > ウェブフロントエンド > Angular テンプレート エンジン ng-template について簡単に説明しましょう
この記事では、再構築管理コンソールで使用される Angular テンプレート エンジン ng-template について説明し、ng-template の ng-container、ngIf、ngFor、ngClass、ngStyle、ngSwitch について簡単に紹介します。 。
テンプレート エンジンは、Web アプリケーションで動的 HTML を生成する方法であり、データ モデルと HTML テンプレートを組み合わせ (つまり、テンプレートのレンダリング)、最終的な HTML を生成します。 HTML テンプレートを記述するための構文はテンプレート構文と呼ばれ、テンプレート構文の表現力と拡張性によって、テンプレート エンジンの使いやすさが決まります。 [関連チュートリアルの推奨事項: 「angular チュートリアル」]
ng-template
Angular
Template として表されます: これは、このタグのコンテンツにテンプレートの一部が含まれ、他のテンプレートと組み合わせて最終的なコンポーネント テンプレートを形成できることを意味します。
ng-template
には主に次のものが含まれます: ng-container
、ngIf
、ngFor
、ngClass
、ngStyle
、ngSwitch
。
ng-container
は論理コンテナであり、 Angular
構造ディレクティブの 1 つであり、内部要素を表示するかどうかを制御します。
ng-container
にはテキストを含む任意の要素を含めることができますが、要素タグをそれ自体で生成したり、ページのスタイルやレイアウトに影響を与えたりすることはありません。他の命令で制御されない場合、含まれるコンテンツはページに直接レンダリングされます。
<div> <ng-container> <p>This is paragraph 1.</p> <p>This is paragraph 2.</p> </ng-container> </div>
<div> <p>This is paragraph 1.</p> <p>This is paragraph 2.</p> </div>
ngIf は、式の値に基づいて、指定された位置に
then または
else テンプレートのコンテンツをレンダリングするために使用されます。
* `then` 模板除非绑定到不同的值,否则默认是 ngIf 指令关联的内联模板。 * `else` 模板除非绑定对应的值,否则默认是 null。复制代码
<div *ngIf="!isLoggedIn"> Please login, friend. </div> <!-- logic && operator --> <div *ngIf="isLoggedIn && !isNewUser"> Welcome back, friend. </div> <!-- logic OR operator --> <div *ngIf="isLoggedIn || isNewUser"> Welcome! </div>
<div *ngIf="isLoggedIn; else loggedOut"> Welcome back, friend. </div> <ng-template #loggedOut> Please friend, login. </ng-template>
<ng-container *ngIf="isLoggedIn; then loggedIn; else loggedOut"></ng-container> <ng-template #loggedIn> <div> Welcome back, friend. </div> </ng-template> <ng-template #loggedOut> <div> Please friend, login. </div> </ng-template>
ngFor反復可能オブジェクトの各項目をテンプレートのコンテキストとして使用して、テンプレートを反復する方法。ローカル変数によってエイリアス化できる追加の値が提供されます:
- 0 から始まる反復内の現在の項目の位置
- 現在の項目が反復可能な項目の最初の項目である場合は true
# #ngClass<mat-list-item *ngFor="let event of events"> <h3 matLine>{{event.title}}</h3> <p matLine class="secondary-text">{{event.detail}}</p> </mat-list-item>
ngClass
最初のパラメータはクラス名、2 番目のパラメータはブール値で、true の場合、最初のパラメータのクラスが追加されます。
ngStyle
<a class="favorite" [ngClass]="[isFavorite ? 'text-dark' : 'text-gray']" (click)="setFavorite()" > <i class="fe fe-heart font-size-21"></i> </a>
ngSwitch
<pre class="brush:js;toolbar:false;"><div class="label-color" [ngStyle]="{&#39;background-color&#39;: labels | getById:labelId:&#39;color&#39;}"></div>
// 判断添加
<div [ngStyle]="{&#39;background-color&#39;:template === &#39;dark&#39; ? &#39;dark&#39; : &#39;light&#39; }"></<div></pre>
プログラミング関連の知識については、
以上がAngular テンプレート エンジン ng-template について簡単に説明しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。