当前位置：首页 > 资讯 > 技术文档

详解Angular2 之结构型指令

时间：2020-05-07 16:26 编辑：来源：阅读：
扫一扫，手机访问

摘要：详解Angular2 之结构型指令

Angular 有一个强力的模板引擎，它能让你轻松维护元素的DOM树结构。 [b]Angular指令可分为三种[/b] [list=1] [*]组件[/*] [*]属性型指令[/*] [*]结构型指令[/*] [/list] [b]组件[/b] 组件其实就是一个带模板的指令。是这三种指令中最常用的，我们会编写大量的组件来构建application。 [b]属性型指令[/b] 属性型指令会修改元素的外观或者行为。 e.g. NgStyle可以修改元素的好几个样式。 [b]结构型指令[/b] 结构型指令通过添加和删除 DOM 元素来改变DOM的布局。我们经常看到的内置的结构型指令有：ngIf、ngSwitch、ngFor。下面我们着重介绍ngIf。 [b]NgIf案例分析[/b] 该指令接受一个布尔值，并据此让一整块DOM树出现或者消失。注意：这里是出现或者消失，并不是隐藏。 [b]隐藏元素的利弊[/b] 当我们隐藏元素时，组件的行为还在继续。它仍然附加子啊它所属于的DOM元素上，它仍然在监听事件。angular会继续检查哪些能影响数据绑定的变更。组件原本要做的哪些事情仍然在进行！它还是占用着那么多的资源。另外一方面，重新显示这个组件会很快。组件以前的状态被保留着，并随时可以显示。组件不用重新初始化，当然，该操作付出代价比较大！ [b]移除元素组件[/b] [b]利 [/b] 把ngIf设置为false，将会影响到组件的资源消耗。angular会从DOM中移除该元素，停止相关组件的变更检测，把它从DOM事件中移除，并且销毁组件。组件会被垃圾回收，并释放内存。 [b]弊 [/b] 如果我们很快再次使用这个组件的时候，重建组件的代价是非常大的。当ngIf重新变成true的时候，angular会重新创建该组件及其子树。angular会重新运行每个组件的初始化逻辑。 [b]总结[/b] 基于上面的利弊分析，无论是我们在使用内置的指令还是使用自定的指令的时候，我们应该自己分析提添加、移除元素以及创建和销毁组件的后果。 [b]标签[/b] 在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的效果是不同的。 [img]http://files.jb51.net/file_images/article/201706/201762192207653.png?201752192223[/img] 显然，Angular把标签及其内容替换成了一个空白 [b]自定义指令[/b] 我们自顶一个类似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();
  }
 }
}

[b]几个概念[/b] [b]星号(*)效果[/b] 这个星号是一种“语法糖”。它简化了ngIf和ngFor —— 无论是写还是读。 [b]ngIf [/b] 接下来这两个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 属性的布尔值决定该模板的内容是否应该被显示。 [b]ngFor[/b] 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：基于angular中的重要指令详解($eval,$parse和$compile)
下一篇：利用Jasmine对Angular进行单元测试的方法详解

资讯排行榜
更多>>

详解Angular2 之 结构型指令

详解Angular2 之结构型指令