模板引擎是 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
– 如果以后项是可迭代中的第一个项,则为 truelast
– 如果以后项是可迭代中的最初一个项,则为 trueeven
– 如果以后索引为偶数,则为 trueodd
– 如果以后索引是奇数,则为 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>