详解Angular2 之 结构型指令

Angular 有一个强力的模板引擎,它能让你轻松维护元素的DOM树结构。

Angular指令可分为三种

  1. 组件
  2. 属性型指令
  3. 结构型指令

组件

组件其实就是一个带模板的指令。是这三种指令中最常用的,我们会编写大量的组件来构建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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • AngularJS内置指令

    指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单记录了一些内置指令,先使用起来,再谈一些有趣的东西. 内置指令 所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突. 首先从一些常见的内置指令开始. 先列出一些关键的内置指令,顺便简单说说作用域的问题. ng-model 将表单控件和当前作用域的属性进行绑定,这么解释似乎也不太正确.

  • AngularJS中的指令全面解析(必看)

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJS这个框架的指令系统,本人也是初学,查阅了一些资料,要是有一些说的不好的地方,万望指出. 指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.那么一个AngularJS指令在HTML代码

  • AngularJS基础 ng-include 指令示例讲解

    AngularJS ng-include 指令 AngularJS 实例 包含 HTML 文件: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>

  • 深入讲解AngularJS中的自定义指令的使用

    AngularJS的自定义指令,就是你自己的指令,加上编译器编译DOM时运行的原生核心函数.这可能很难理解.现在,假设我们想在应用中不同页面复用一些特定的代码,而又不复制代码.那么,我们就可以简单地把这段代码放到单独的文件,并调用使用自定义指令的代码,而不是一遍又一遍地敲下来.这样的代码更容易理解.AngularJS中有四种类型的自定义指令: 元素指令 属性指令 CSS class 指令 注释指令 在我们现有的app中实现他们之前,我们来看看自定义指令是个什么样子:   元素指令 在html中写

  • 用AngularJS的指令实现tabs切换效果

    先来看看效果图 首先先来说一下指令嵌套,指令嵌套顾名思义就是两个以上的指令嵌套在一起,比如下面这样: <A-deirective> <B-directive></B-directive> <C-directive></C-directive> </A-directive> 下面这个tabs功能的指令,刚好用到了这个,可以让代码更加简洁. <!DOCTYPE html> <html lang="en"

  • AngularJS中关于ng-class指令的几种实现方式详解

    前言 开发中经常会遇到这样的需求,一个元素需要在不同的状态下呈现不同的样子,而在这所谓的的样子当然就是改变其css的属性,而实现动态的改变属性值,我们就需要实现动态的更换其class属性值. 在这给大家介绍三种方法来实现,大家可以根据自己的需求来选择方式,下面来看看. 第一种:通过数据的双向绑定(不推荐) <div ng-controller="firstController"> <div ng-class="{{className}}">&

  • Angular2内置指令NgFor和NgIf详解

    在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个可以运行起来的Angular2的样例程序,最好就是我们上一章节中完成的那个QuickStart小项目或者你自己根据官网上面的步骤完成的QuickStart小项目,因为我们的讲解都是在那个基础上来进行的;然后让我们开始下面的快乐旅程吧. 因为我们的这一系列的文章都是使用的TypeScript所以在看下面的内容之前你最好可以看一下TypeScript或者ES6的类,它们的网址分

  • AngularJS基础 ng-if 指令用法

    AngularJS ng-if 指令 AngularJS 实例 取消选中,并移除内容: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <b

  • 详解AngularJS中ng-src指令的使用

    前言 在日常开发工作中,有很多需求是在一个页面上显示一些图片.有时,图片的地址路径是由客户端的脚本来设置(它有可能是从数据库中获取的). 这是Angularjs的时代,当我们想使用Angularjs来实现在页面中展示图片,我们会简单使用: <img src="path of image">. 如果我们只考虑展示,毫无疑问它没问题,但是在浏览器的控制台中会显示一个 404 (not found) 错误. 为了解决这个问题,我们需要使用ng-Src.在使用 ng-Src之前,我

  • 详解Angular2 之 结构型指令

    Angular 有一个强力的模板引擎,它能让你轻松维护元素的DOM树结构. Angular指令可分为三种 组件 属性型指令 结构型指令 组件 组件其实就是一个带模板的指令.是这三种指令中最常用的,我们会编写大量的组件来构建application. 属性型指令 属性型指令会修改元素的外观或者行为. e.g. NgStyle可以修改元素的好几个样式. 结构型指令 结构型指令通过添加和删除 DOM 元素来改变DOM的布局. 我们经常看到的内置的结构型指令有:ngIf.ngSwitch.ngFor. 下

  • 详解Angular结构型指令模块和样式

    一,结构型指令 *是一个语法糖,<a *ngIf="user.login">退出</a>相当于 <ng-template [ngIf]="user.login"> <a>退出</a> </ng-template> 避免了写ng-template. <ng-template [ngIf]="item.reminder"> <mat-icon > alar

  • 详解Vue中的自定义指令

    除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令.在Vue里,代码复用的主要形式和抽象是组件.然而,有的情况下,仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令.本文将详细介绍Vue自定义指令 指令注册 以一个input元素自动获得焦点为例,当页面加载时,使用autofocus可以让元素将获得焦点 .但是autofocus在移动版Safari上不工作.现在注册一个使元素自动获取焦点的指令 指令注册类似于组件注册,包括全局指令和局部指令两

  • 详解angular2采用自定义指令(Directive)方式加载jquery插件

    由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目, 那么如何把jquery插件放到angular2中呢?采用自定义指令! 在上下文之前要引入jquery,这点不再描述 首先创建一个指令,采用@input方式,来获取jquery插件所需要的参数. 在ngOnChanges时,也就是参数通过@input传入时,初始化jquery插件, 初始化jquery插件需要获取dom元素,所以我们引入ElementRef,用来获取dom元素 这里需要讲一下,jqu

  • 详解angular2.x创建项目入门指令

    很久没写过angular2.x ,最近一次也是几个月之前,为了下次查阅方便,相关命令记录下 1.ng --version 检查下自己angular cli版本 顺便看看npm -v node -v E:\phpStudy\PHPTutorial\WWW>ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | |

  • 详解Angular2组件之间如何通信

    组件之间的共享可以有好几种方式 父->子 input 方式 import {Component,Input} from 'angular2/core'; @Component({ selector: 'child', template: ` <h2>child {{content}}</h2> ` }) class Child { @Input() content:string; } @Component({ selector: 'App', directives: [Chi

  • 详解Angular2中Input和Output用法及示例

    对于angular2中的Input和Output可以和AngularJS中指令作类比. Input相当于指令的值绑定,无论是单向的(@)还是双向的(=).都是将父作用域的值"输入"到子作用域中,然后子作用域进行相关处理. Output相当于指令的方法绑定,子作用域触发事件执行响应函数,而响应函数方法体则位于父作用域中,相当于将事件"输出到"父作用域中,在父作用域中处理. 看个angular2示例吧,我们定义一个子组件,获取父作用域的数组值并以列表形式显示,然后当点击

  • 详解Angular2表单-模板驱动的表单(Template-Driven Forms)

    在网页开发中,表单估计是最常用的一个,同时也是最麻烦.最容易出问题的.在一个稍微复杂一点的应用中,我们除了用表单元素收集数据,还需要验证,几个数据之间可能还会相互关联,然后根据不同的数据值调用不同的业务逻辑等. 使用Angular提供的数据绑定的功能,我们可以很容易就在组件中获得用户输入的数据,Angular也提供了几种验证方式方便我们进行数据的校验.但是,一些自定义的数据验证.数据交互和业务逻辑还是需要自己处理. 在Angular2中,提供了2种表单实现方式,分别是'template-driv

  • 详解Angular2响应式表单

    本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面. 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件. 响应式表单是一项响应式风格的ng2技术,本文将解释响应式表单并用来创建一个英雄详情编辑器. 包含内容: 响应式表单介绍 开始搭建 创建数据模型 创建响应式的表单组件 创建组建的模板文件 引入ReactiveFormsModule 显示HeroDetailComponent 添加一个FormGroup 看看表单模型 介绍FormBuilder 验证的需求 放

  • 详解angular2实现ng2-router 路由和嵌套路由

    实现ng2-router路由,嵌套路由 首先配置angular2的时候router模块已经下载,只需要引入即可 import {RouterModule, Routes} from "@angular/router"; 我们要创建一个嵌套路由,所以需要创建以下文件 index.html app.module.ts app.component.ts home.component.ts list.component.ts list-one.component.ts list-two.com

随机推荐