模板引擎是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>

完