angular之自定义 directive
1,指令的创建至少需要一个带有@Directive装饰器修饰的控制器类。@Directive装饰器指定了一个选择器名称,用于指出与此指令相关联的属性的名字。
2,创建一个highlight.directive.ts文件 可以用命令 ng g directive highlight;内容如下
这里是做一个给元素加色彩的一个指令。
import { Directive, ElementRef, Renderer } from '@angular/core'; @Directive({
selector: '[appHightlight]'
})
export class HighlightDirective {
constructor(elem: ElementRef, renderer: Renderer) {
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
}
}
//ps:
- 首先使用 import 语句从Angular Core库中导入我们需要使用的一些功能模块。
使用 Directive 模块提供的 @Directive 修饰器,对 HighlightDirective 类进行功能修饰;
在 HighlightDirective 类的构造函数中注入 ElementRef 和 Renderer 模块的实例(这里涉及到的DI-依赖注入关系之后也会有详细的学习笔记介绍)。
注入 ElementRef 的目的在于让指令可以引用到真实的 DOM 元素。ElementRef这个类可以用来在宿主标签内注入其它标签的应用,这些应用并不仅仅局限于 DOM 元素。ElementRef这个类可以用来在宿主标签内注入其它标签的应用,这些应用并不仅仅局限于 DOM 元素。
Renderer 可以让我们在 Hightlight 类里面的逻辑代码能够正确的渲染 DOM 元素的样式。 - 在倒入需要使用的功能模块后,我们使用@Directive装饰器以‘配置对象’参数的形式,对指令的元数据进行说明。
属性型指令的@Directive装饰器需要一个css选择器来指定selector的值,以便Angular编译器从模版中识别出关联到这个指令的HTML。例如:代码中的‘[]’对应的就是css选择器中的属性选择器。 - 紧接着在@Directive元数据后面,我们声明并导出里指令的控制器类 HighlightDirective,HighlightDirective类包含了prefixHightlight指令的工作逻辑。别忘记了导出指令的控制器,
这样才能够让我们定义的指令被别的指令(组件)访问。 - 需要注意的是:属性型指令的 selector 必须要对应 CSS 的属性选择器,同时命名需要遵循驼峰式命名方式
Tips: 在Angualr的最佳实践中推荐,
1. 我们应该为我们定义的每一个指令,组件,服务都添加上前缀。这样做的好处在于: 确保我们自己声明定义的这些指令,组件,
服务不会与标准的HTML属性冲突,也降低与第三方指令,组件,服务冲突的可能性。
2. 指令的名称应该具备一定的自解释性,这样方便我们通过指令的名称就能大概知道指令的用途。
3,使用 <div appHighlight ></div> 这样这个div就会显示yellow色;
请记的声明。没有声明会报错如下
EXCEPTION: Template parse errors:
Can’t bind to ‘appHighlight’ since it isn’t a known property of ‘div’.
这是最简单的形式;复杂的可以可以带事件,带参数;如下:
import {Directive, Input, ElementRef, Renderer, HostListener} from "@angular/core"; @Directive({
selector: '[exeBackground]'
})
export class ExeBackgroundDirective {
private _defaultColor = 'yellow'; @Input('exeBackground')
backgroundColor: string; // 输入属性,用于设置元素的背景颜色 constructor(private elementRef: ElementRef, private renderer: Renderer) {
this.setStyle(this._defaultColor);
} @HostListener('click')
onClick() { // 监听宿主元素的点击事件,设置元素背景色
this.setStyle(this.backgroundColor || this._defaultColor);
} private setStyle(color: string) { // 调用renderer对象提供的API设置元素的背景颜色
this.renderer.setElementStyle(this.elementRef.nativeElement,
'backgroundColor', color);
}
}
使用形式:
import { Component } from '@angular/core'; @Component({
selector: 'my-app',
template: `<h1 [exeBackground]="'red'">Hello {{name}}</h1>`,
})
export class AppComponent {
name = 'Angular';
}
angular之自定义 directive的更多相关文章
- 关于angular 自定义directive
关于angular 自定义directive的小结 首先我们创建一个名为"expander"的自定义directive指令: angular.module("myApp& ...
- -_-#【Angular】自定义指令directive
AngularJS学习笔记 <!DOCTYPE html> <html ng-app="Demo"> <head> <meta chars ...
- 理解AngularJS生命周期:利用ng-repeat动态解析自定义directive
ng-repeat是AngularJS中一个非常重要和有意思的directive,常见的用法之一是将某种自定义directive和ng-repeat一起使用,循环地来渲染开发者所需要的组件.比如现在有 ...
- AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?
最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...
- Angular之指令Directive系列
项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构 ...
- AngularJS自定义Directive中link和controller的区别
在AngularJS中,自定义Directive过程中,有时用link和controller都能实现相同的功能.那么,两者有什么区别呢? 使用link函数的Directive 页面大致是: <b ...
- 自定义Directive使用ngModel
我们知道ngModel是AngularJS中默认的一个Directive,用于数据的双向绑定.通常是这样使用的: <input type="text" ng-model=&q ...
- Angular 下的 directive (part 2)
ngCloak ngCloak指令被使用在,阻止angular模板从浏览器加载的时候出现闪烁的时候.使用它可以避免闪烁问题的出现. 该指令可以应用于<body>元素,但首选使用多个ng ...
- AngularJS自定义Directive不一定返回对象
AngularJS中,当需要自定义Directive时,通常返回一个对象,就像如下的写法: angular.module('modulename') .directive('myDirective', ...
随机推荐
- JUnit之参数化测试、套件/成组测试的使用
原文地址http://blog.csdn.net/yqj2065/article/details/39967065 参数化测试 正如数组替代int a0,a1,a2一样,测试加法时assertEqua ...
- vmware下安装centos7
下载vmware http://down-www.newasp.net/pcdown/big/wm_pro_14_win.rar 下载centos7 https://www.centos.org/do ...
- PKU 2531 Network Saboteur(dfs+剪枝||随机化算法)
题目大意:原题链接 给定n个节点,任意两个节点之间有权值,把这n个节点分成A,B两个集合,使得A集合中的每一节点与B集合中的每一节点两两结合(即有|A|*|B|种结合方式)权值之和最大. 标记:A集合 ...
- XDU 1055
#include<stdio.h> #include<cstring> int main() { //freopen("orz.txt","w&q ...
- 粗略介绍Java AQS的实现原理
本文转自 http://www.importnew.com/24006.html 感谢作者 对我很有帮助 ①引言 AQS是JDK1.5提供的一个基于FIFO等待队列一个同步器的基础框架,java中的同 ...
- Spring AOP (事务管理)
一.声明式事务管理的概括 声明式事务(declarative transaction management)是Spring提供的对程序事务管理的方式之一. Spring的声明式事务顾名思义就是采用声明 ...
- 前端虚拟接口mockjs的使用
最近在学习VueJS,也进一步学习了ES6,看了一遍之后,难免手痒,所以想仿写点什么,但是数据是个问题,你总不能写个分页,写个轮播吧,但是在公司做自己的东西找后台要接口也不那么像回事,怎么办呢? 无意 ...
- C/C++之Qt正则表达式
引言 正则表达式(regular expression)就是用一个“字符串”来描述一个特征,然后去验证另一个“字符串”是否符合这个特征.比如 表达式“ab+” 描述的特征是“一个 'a' 和 任意个 ...
- ABP官方文档翻译 1.5 多租户
多租户 什么是多租户? 数据库和部署架构 多部署-多数据库 单部署-多数据库 单部署-单数据库 单部署-混合数据库 多部署-单/多/混合数据库 ABP的多租户 启用多租户 租主和租户 会话 决定当前租 ...
- JS正则表达式从入门到入土(10)—— 字符串对象方法
字符串对象方法 search方法 String.prototype.search(reg) search方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,方法返回第一个匹配结果的 ...