1. 指令说明

Angular2 指令是构成Angular2应用程序的重要组成部分,指令主要用来对模板的标签或者元素附加一些新的特性或者功能,改变一个 DOM 元素的外观或行为,Angular2指令和组件十分类似,也有由模块,注解,元数据以及组件类组成,实际上组件继承于指令,不同的是指令没有模板的信息,主要存在两种类型的指令:

l 结构型指令:会通过添加 / 删除 DOM 元素来更改 DOM 树布局

l 属性型指令:指令改变一个元素的外观或行为。

2. 结构型指令

结构性指令一般都使用的是内置的结构性指令,常见的内置结构性指令有ngIf,ngFor,ngSwitch等。这三个指令比较常用来改变DOM的结构

名称

用法

说明

ngIf

<section *ngIf="showSection">

基于showSection表达式的值移除或重新创建部分DOM树。

ngFor

<li *ngFor="let item of list">

把li元素及其内容转化成一个模板,并用它来为列表中的每个条目初始化视图。

ngSwitch

ngSwitchWhen

ngSwitchDefault

<div [ngSwitch]="conditionExpression">
  <template [ngSwitchWhen]="case1Exp">...</template>
  <template ngSwitchWhen="case2LiteralString">...</template>
  <template ngSwitchDefault>...</template>
</div>

基于conditionExpression的当前值,从内嵌模板中选取一个,有条件的切换div的内容。

3. 属性型指令

常见的内置属性型指令有以下几个,ngModel,ngClass等

名称

用法

说明

ngModel

<input [(ngModel)]="userName">

提供双向绑定,为表单控件提供解析和验证。

ngClass

<div [ngClass]="{active: isActive, disabled: isDisabled}"></div>

把一个元素上CSS类的出现与否,绑定到一个真值映射表上。右侧的表达式应该返回类似{class-name: true/false}的映射表。

4. 自定义指令

指令主要包括模块,注解,元数据,指令类等几部分,和组件类似。

我们来实现一个简单的自定义组件的例子,当鼠标滑过移动到当前元素的时候字体变大移除的时候字体恢复原样。

4.1 模块

首先我们引入对应的模块及函数等

import { Directive, ElementRef, HostListener}
from '@angular/core';

4.2 注解

从@angular/core中导入Directive函数后,可以使用@ Directive ()来标示组件类为一个Directive,@标示注解的一种标识,用来普通类附加对应的元数据信息。

4.3 元数据

@Directive将元数据的信息附加到类上,我们来了解一下常用的元数据信息都有哪些:

@Directive({

selector: '[fontIn]',

providers: [PrService]

})

selector:选择器名称,在组件使用过程中,充当模板中的标识,类似a标签中的a。这个属性信息是必须的,必须精确的指定在模板中所使用的标签定义,可以为属性,标签或者样式类等,本例子使用属性型指令的方式,选择器为fontIn属性。

providers:服务提供者集合,依赖注入系统的部分,配置了那些新的服务会引入到指令类中进行使用。

4.4 指令类

组件类作为组件的核心代码区域,包含了组件的逻辑以及视图的显示数据信息。

我们要实现对指定的元素的样式进行修改,当鼠标滑过移动到当前元素的时候字体变大移除的时候字体恢复原样。

(1). 首先我们在指令类的构造函数中引入ElementRef类,通过依赖注入获取当前指令所在的元素信息

constructor(elementRef: ElementRef) {

this.element = elementRef.nativeElement;

this.size = this.element.style.fontSize

}

(2). 引入HostListener函数,在该指令的包含元素上附加监听事件'mouseenter','mouseleave’,当鼠标事件触发是会执行指定的onMouseEnter和onMouseLeave事件。

@HostListener('mouseenter')

onMouseEnter() {

this.setFont(true);

}

@HostListener('mouseleave')

onMouseLeave() {

this.setFont(false);

}

setFont(org: boolean) {

if
(org) {

this.element.style.fontSize = "larger";

}
else {

this.element.style.fontSize = this.size;

}

}

最后实现的代码如下所示:

import { Directive, ElementRef, HostListener}
from '@angular/core';

@Directive({

selector: '[fontIn]'

})

export class FontInDirective {

private
element: HTMLElement;

private
size: string

constructor(elementRef: ElementRef) {

this.element = elementRef.nativeElement;

this.size = this.element.style.fontSize

}

@HostListener('mouseenter')

onMouseEnter() {

this.setFont(true);

}

@HostListener('mouseleave')

onMouseLeave() {

this.setFont(false);

}

setFont(org: boolean) {

if
(org) {

this.element.style.fontSize = "larger";

}
else {

this.element.style.fontSize = this.size;

}

}

}

Angular2 指令的更多相关文章

  1. 迈向angularjs2系列(2):angular2指令详解

    一:angular2 helloworld! 为了简单快速的运行一个ng2的app,那么通过script引入预先编译好的angular2版本和页面的基本框架. index.html: <!DOC ...

  2. angular2的生命周期钩子的使用情况

    angular 2 Directive Lifecycleangular2 中组建继承于指令,并扩展了与ui视图相关的属性.angular2 指令的生命周期是用来记录指令从创建,应用及销毁的过程.an ...

  3. bootstrap4中文版(纯手工翻译)

    1初步开始 1.1依赖 这个仓储包含一系列基于bootstrap标识和css样式的原生angular2指令.所以是不需要依赖jq和bootstrap.js的.只需要以下依赖即可: Angular(需要 ...

  4. Angular2组件与指令的小实践——实现一个图片轮播组件

    如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...

  5. Angular2组件与指令的小实践

    如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...

  6. angular2的ngfor ngif指令嵌套

    angular2的ngfor ngif指令嵌套 ng2 结构指令不能直接嵌套使用,可使用<ng-container>标签来包裹指令 示例如下: <ul> <ng-cont ...

  7. Angular2 内置指令 NgFor 和 NgIf 详解

    http://www.jb51.net/article/89781.htm 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个 ...

  8. angular2路由之routerLinkActive指令

    angular2的routerLinkActive指令在路由激活时添加样式class .red{  color: red;}    <a routerLink="/user/login ...

  9. angular2采用自定义指令(Directive)方式加载jquery插件

    由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目, 那么如何把jquery插件放到angular2中呢?采用自定义指令! 在上下文之前要引入jquery ...

随机推荐

  1. <转>卷积神经网络是如何学习到平移不变的特征

    After some thought, I do not believe that pooling operations are responsible for the translation inv ...

  2. FineUI小技巧(5)向子窗口传值,向父窗口传值

    前言 FineUI中经常会用到启用IFrame的Window控件,这样有助于从物理上进行代码解耦和.IFrame的引入就会涉及传值问题,如何在父窗口和子窗口之间相互传值呢? 向子窗口传值 向子窗口传值 ...

  3. 1323 union解题报告

    http://codeup.cn/problem.php?id=1323 1323: 算法2-1:集合union 时间限制: 1 Sec 内存限制: 32 MB 提交: 2884 解决: 688 题目 ...

  4. Android BLE 蓝牙编程(四)

    接上篇,我们已经实现了短震,长震的功能了- 现在我们需要实现点击后一直震动的功能 开始我的想法是再循环中不断执行write方法,然而这个办法行不通. 系统会报错. 那要如何实现这个想法呢?其实很简单, ...

  5. LVS持久连接

    LVS持久连接 源地址HASH ipvs的连接模板 可以通过ipvsadm -L -c 持久连接持久客户端连接 PCC:在固定时间内将来自于同一个客户端发往VIP的所有请求统统定向至同一个RS0表示所 ...

  6. [转]Extjs combo数据绑定与获取

    原文地址:http://www.cnblogs.com/loveme123/archive/2012/05/10/2494466.html 1. 配置combo: {                  ...

  7. Linux--目录结构解释(转)

    / root --- 启动Linux时使用的一些核心文件.如操作系统内核.引导程序Grub等. home --- 存储普通用户的个人文件 ftp --- 用户所有服务 httpd samba user ...

  8. js 数据类型 typeof的测试

    , t2 = ', t3 = null, t4 = NaN, t5 = undefined, t6 = function() {}, t7 = true, t8 = window, t9 = docu ...

  9. IDC机房线路质量测试方案

    1.测试节点: 北京:123.206.*.* 上海:139.196.*.* 广州:119.29.*.* 汕头:125.91.*.* 香港:103.20.*.* 美国:198.52.*.* 测试服务器: ...

  10. Nginx简易配置文件(一)(静态页面及PHP页面解析)

    user nobody nobody; worker_processes 4; error_log logs/error.log; pid logs/nginx.pid; events { use e ...