Angular テンプレート エンジン ng-template について簡単に説明しましょう

この記事では、再構築管理コンソールで使用される Angular テンプレート エンジン ng-template について説明し、ng-template の ng-container、ngIf、ngFor、ngClass、ngStyle、ngSwitch について簡単に紹介します。 。

テンプレート エンジンは、Web アプリケーションで動的 HTML を生成する方法であり、データ モデルと HTML テンプレートを組み合わせ (つまり、テンプレートのレンダリング)、最終的な HTML を生成します。 HTML テンプレートを記述するための構文はテンプレート構文と呼ばれ、テンプレート構文の表現力と拡張性によって、テンプレート エンジンの使いやすさが決まります。 [関連チュートリアルの推奨事項: 「angular チュートリアル」]

ng-template の紹介

ng-template AngularTemplate として表されます: これは、このタグのコンテンツにテンプレートの一部が含まれ、他のテンプレートと組み合わせて最終的なコンポーネント テンプレートを形成できることを意味します。

ng-template には主に次のものが含まれます: ng-container、ngIf、ngFor、ngClass、ngStyle、ngSwitch。

ng-container

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

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>

ログイン後にコピー

else ブロックを使用する

<div *ngIf="isLoggedIn; else loggedOut">
  Welcome back, friend.
</div>

<ng-template #loggedOut>
  Please friend, login.
</ng-template>

ログイン後にコピー

then ブロックと else ブロックを使用する

<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

ngFor反復可能オブジェクトの各項目をテンプレートのコンテキストとして使用して、テンプレートを反復する方法。ローカル変数によってエイリアス化できる追加の値が提供されます:

• index - 0 から始まる反復内の現在の項目の位置
• first - 現在の項目が反復可能な項目の最初の項目である場合は true
##last
• - 現在の項目が反復可能な項目の最後の項目である場合は true
even
• - 現在のインデックスが偶数の場合は true
#odd
• - 現在のインデックスが奇数の場合は true # #ngClass

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

ngStyle コンポーネントまたは要素のスタイル属性を変更します。

<a
      class="favorite"
      [ngClass]="[isFavorite ? &#39;text-dark&#39; : &#39;text-gray&#39;]"
      (click)="setFavorite()"
>
      <i class="fe fe-heart font-size-21"></i>
</a>

ngSwitch

ng-switch式の値に応じて、対応する部分を表示または非表示にします。

- 対応する条件オプション。一致するオプションが選択されている場合は表示され、一致しない場合は削除されます。

• ng-switch-default
- デフォルトのオプションを設定します。一致しない場合は、デフォルトのオプションが表示されます。

• <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>

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

  以上がAngular テンプレート エンジン ng-template について簡単に説明しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。