模板引擎是 Web 利用中用来生成动静 HTML 的一个路径，负责将数据模型与 HTML 模板联合起来（即模板渲染），生成最终的 HTML。编写 HTML 模板的语法称为模板语法，模板语法的表达能力和可扩展性决定了模板引擎的易用性。本文将介绍在重构治理控制台中应用到的 Angular 的模板引擎ng-template。

ng-template 简介

ng-template示意为 Angular 模板：这意味着此标记的内容将蕴含模板的一部分，而后能够与其余模板一起组合以造成最终的组件模板。

ng-template次要包含：ng-container、ngIf，ngFor、ngClass、ngStyle和ngSwitch。

ng-container

ng-container是一个逻辑容器，是 Angular 结构型指令中的一种，用于蕴含管制外部元素的显示与否。

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

<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

ngClass指令更改绑定到其附加的组件或元素的 class 属性。

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

ngClass第一个参数为类名称，第二个参数为 boolean 值，如果为 true 就增加第一个参数的类。

ngStyle

ngStyle来批改组件或元素的 style 属性。

<div class="label-color" [ngStyle]="{'background-color': labels | getById:labelId:'color'}"></div>
// 判断增加
<div [ngStyle]="{'background-color':template ==='dark'?'dark':'light'}"></<div>

ngSwitch

ng-switch依据表达式的值显示或这暗藏对应局部。

• ng-switch-when – 对应条件选项，如果匹配选中抉择显示，其余为匹配的则移除。
• ng-switch-default – 设置默认选项，如果都没有匹配的状况，默认选项会显示。

<div ng-switch="表达式 / 变量">
    <div ng-switch-when="value"></div>
    <div ng-switch-when="value"></div>
    <div ng-switch-when="value"></div>
    <div ng-switch-default></div>
</div>

完