Angular2 指令

2024-04-05 12:50•杂谈•阅读 3418

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