浅谈一下Angular模板引擎ng-template
模板引擎是Web应用中用来生成动态HTML的一个途径, 负责将数据模型与HTML模板结合起来(即模板渲染),生成最终的HTML。 编写HTML模板的语法称为模板语法,模板语法的表达能力和可扩展性决定了模板引擎的易用性。【相关教程推荐:《angular教程》】
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
更多编程相关知识,请访问:编程视频!!
以上就是浅谈一下Angular模板引擎ng-template的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 浅谈一下Angular模板引擎ng-template
本文地址: https://pptw.com/jishu/591811.html