详解Angular2 之 结构型指令
angular 有一个强力的模板引擎,它能让你轻松维护元素的dom树结构。
angular指令可分为三种
- 组件
- 属性型指令
- 结构型指令
组件
组件其实就是一个带模板的指令。是这三种指令中最常用的,我们会编写大量的组件来构建application。
属性型指令
属性型指令会修改元素的外观或者行为。 e.g. ngstyle可以修改元素的好几个样式。
结构型指令
结构型指令通过添加和删除 dom 元素来改变dom的布局。
我们经常看到的内置的结构型指令有:ngif、ngswitch、ngfor。
下面我们着重介绍ngif。
ngif案例分析
该指令接受一个布尔值,并据此让一整块dom树出现或者消失。
注意:这里是出现或者消失,并不是隐藏。
隐藏元素的利弊
当我们隐藏元素时,组件的行为还在继续。
它仍然附加子啊它所属于的dom元素上,它仍然在监听事件。angular会继续检查哪些能影响数据绑定的变更。组件原本要做的哪些事情仍然在进行!它还是占用着那么多的资源。
另外一方面,重新显示这个组件会很快。
组件以前的状态被保留着,并随时可以显示。组件不用重新初始化,当然,该操作付出代价比较大!
移除元素组件
利
把ngif设置为false,将会影响到组件的资源消耗。angular会从dom中移除该元素,停止相关组件的变更检测,把它从dom事件中移除,并且销毁组件。组件会被垃圾回收,并释放内存。
弊
如果我们很快再次使用这个组件的时候,重建组件的代价是非常大的。
当ngif重新变成true的时候,angular会重新创建该组件及其子树。angular会重新运行每个组件的初始化逻辑。
总结
基于上面的利弊分析,无论是我们在使用内置的指令还是使用自定的指令的时候,我们应该自己分析提添加、移除元素以及创建和销毁组件的后果。
标签
在angular应用之外,标签的默认css属性display是none。 它的内容存在于一个隐藏的文档片段中。
而在angular应用中,angular会移除 标签及其子元素。
我们可以通过把短语”hip! hip! hooray!”中间的”hip”包在一个标签中来验证下这个效果。
<p> hip! </p> <template> <p> hip! </p> </template> <p> hooray! </p>
这时候显示的内容是'hip! hooray!',在angular的控制下,dom的效果是不同的。
显然,angular把标签及其内容替换成了一个空白
自定义指令
我们自顶一个类似ngif的指令。
import { directive, input } from '@angular/core'; import { templateref, viewcontainerref } from '@angular/core'; /** 选中器[],是匹配页面上的指令,可以有多个名称,由于是自己的指令,所以没有使用ng开头 */ @directive({ selector: '[myunless]' }) export class unlessdirective { /** * 我们需要访问模板,并且还需要一个渲染器来渲染它的内容。 * 我们通过templateref来访问模板。渲染器是viewcontainerref。 * 我们把它们都作为私有变量注入到构造函数中。 */ constructor( private templateref: templateref<any>, private viewcontainer: viewcontainerref ) { } /** * 如果条件为假,我们就渲染模板,否则就清空元素内容。 * 我们现在先把myunless属性定义成一个“只写”属性。 */ @input() set myunless(condition: boolean) { if (!condition) { this.viewcontainer.createembeddedview(this.templateref); } else { this.viewcontainer.clear(); } } }
几个概念
星号(*)效果
这个星号是一种“语法糖”。它简化了ngif和ngfor —— 无论是写还是读。
ngif
接下来这两个ngif范例的效果完全相同,只是我们写成了另一种风格:
<!-- examples (a) and (b) are the same --> <!-- (a) *ngif paragraph --> <p *ngif="condition"> our heroes are true! </p> <!-- (b) [ngif] with template --> <template [ngif]="condition"> <p> our heroes are true! </p> </template>
要知道,angular会把风格(a)写成风格(b)。 它把段落及其内容移到了 标签中。 它把指令移到了 标签上,成为该标签的一个属性绑定 —— 包装在方括号中。 宿主组件的condition 属性的布尔值决定该模板的内容是否应该被显示。
ngfor
angular把*ngfor转换成一个类似的形式:
<!-- examples (a) and (b) are the same --> <!-- (a) *ngfor div --> <div *ngfor="let hero of heroes">{{ hero }}</div> <!-- (b) ngfor with template --> <template ngfor let-hero [ngforof]="heroes"> <div>{{ hero }}</div> </template>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。