Angular17之Angular自定义指令详解


Posted in Javascript onJanuary 21, 2018

1 什么是HTML

HTML文档就是一个纯文本文件,该文件包含了HTML元素、CSS样式以及JavaScript代码;HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲染这些DOM节点来呈现内容,用户在浏览器中看到的内容就是浏览器渲染DOM对象后的结果。

2 指令的分类

组件、属性指令、结构性指令

3 指定义指令常用到的一些常量

3.1 Directive

用于装饰控制器类来指明该控制器类是一个自定义指令控制器类

  3.2 ElementRef

作为DOM对象的引用使用,通过构造器进行依赖注入,它的实例代表标注有自定义指令那个元素的DOM对象;每个标注了自定义指令的元素都会自动拥有一个ElementRef对象来作为该元素DOM对象的引用(前提:在自定义指令的控制器中依赖注入了ElementRef)

3.3 Render2

Render2的实例是用来操作DOM节点的,因为Angular不推荐直接操作DOM节点;Render2是从Angular4才开始支持的,之前的版本是使用的Render;每个标注有自定义指令的元素都会拥有一个Render2实例来操作该元素的DOM属性(前提:在自定义指令的控制器中依赖注入了Render2)

  3.4 HostListener

用于装饰事件触发方法的注解

4 自定义属性指令

一个自定义的属性指令需要一个有@Directive装饰器进行装饰的控制器类

import { Directive } from '@angular/core';
@Directive({
 selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive {
 constructor() { }
}

4.1 实现自定义属性指令

4.1.1 创建自定义属性指令控制类

技巧01:创建一个模块来专门放自定义指令

ng g d directive/test/directive-test02 --spec=false --module=directive

4.1.2 在控制器类中依赖注入ElementRef

 

constructor(
 private el: ElementRef
 ) {}

4.1.3 通过ElementRef实例改变标有自定义指令元素对应的DOM对象的背景颜色 

ngOnInit() {
 this.el.nativeElement.style.backgroundColor = 'skyblue';
 }

4.1.3 在自定义指令模块中指定exports 

Angular17之Angular自定义指令详解

 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DirectiveTest01Directive } from './test/directive-test01.directive';
import { SharedModule } from '../shared/shared.module';
import { DirectiveTest02Directive } from './test/directive-test02.directive';
@NgModule({
 imports: [
 CommonModule
 ],
 declarations: [
 DirectiveTest01Directive,
 DirectiveTest02Directive],
 exports: [
 DirectiveTest01Directive,
 DirectiveTest02Directive
 ]
})
export class DirectiveModule { }

4.1.4 将自定义指令模块导入到需要用到指定指令的组件所在的模块中

技巧01:自定义指令一般会被多次用到,所以一般会将自定义指令模块导入到共享模块在从共享模块导出,这样其它模块只需要导入共享模块就可以啦

Angular17之Angular自定义指令详解

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { 
 MdToolbarModule,
 MdSidenavModule,
 MdIconModule,
 MdButtonModule,
 MdCardModule,
 MdInputModule,
 MdRadioModule,
 MdRadioButton
 } from '@angular/material';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { DirectiveModule } from '../directive/directive.module'; 
@NgModule({
 imports: [
 CommonModule,
 RouterModule,
 FormsModule,
 ReactiveFormsModule,
 HttpModule,
 MdToolbarModule,
 MdSidenavModule,
 MdIconModule,
 MdButtonModule,
 MdCardModule,
 MdInputModule,
 DirectiveModule,
 MdRadioModule
 ],
 declarations: [],
 exports: [
 CommonModule,
 RouterModule,
 FormsModule,
 ReactiveFormsModule,
 HttpModule,
 MdToolbarModule,
 MdSidenavModule,
 MdIconModule,
 MdButtonModule,
 MdCardModule,
 MdInputModule,
 DirectiveModule,
 MdRadioButton
 ]
})
export class SharedModule { }

4.1.5 在组件中使用自定组件对应的选择器即可

自定义指令的选择器是由@Directive装饰器的selector元数据指定的

Angular17之Angular自定义指令详解

 在元素中直接标注自定义指令的选择器就行啦

Angular17之Angular自定义指令详解

<div class="panel panel-primary">
 <div class="panel panel-heading">实现自定义属性指令</div>
 <div class="panel-body">
 <button md-raised-button appDirectiveTest02>实现自定义指令的按钮</button>
 <br /><br />
 <button md-raised-button>未实现自定以指令的按钮</button>
 </div>
 <div class="panel-footer">2018-1-20 22:47:06</div>
</div>

4.1.6 代码汇总

import { Directive, ElementRef } from '@angular/core';
import { OnInit } from '../../../../node_modules/_@angular_core@4.4.6@@angular/core/src/metadata/lifecycle_hooks';
@Directive({
 selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive implements OnInit {
 constructor(
 private el: ElementRef
 ) {}
 ngOnInit() {
 this.el.nativeElement.style.backgroundColor = 'skyblue';
 }
}

  4.2 给自定义属性指令绑定输入属性

在4.1中实现的自定义属性指令中背景颜色是写死的不能更改,我们可以给指令绑定输入属性实现数据传递,从而达到动态改变的目的

4.2.1 在自定义属性指令的控制器中添加一个输入属性myColor

Angular17之Angular自定义指令详解

import { Directive, ElementRef, OnInit, Input } from '@angular/core';
@Directive({
 selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive implements OnInit {
 @Input()
 myColor: string;
 constructor(
 private el: ElementRef
 ) {}
 ngOnInit() {
 this.el.nativeElement.style.backgroundColor = this.myColor;
 }
}

4.2.2 在组件中给myColor属性赋值

技巧01:在给输入属性赋值时,等号右边如果不是一个变量就需要用单引号括起来

Angular17之Angular自定义指令详解

<div class="panel panel-primary">
 <div class="panel panel-heading">实现自定义属性指令</div>
 <div class="panel-body">
 <button md-raised-button appDirectiveTest02 [myColor]="'red'">实现自定义指令的按钮</button>
 <br /><br />
 <button md-raised-button>未实现自定以指令的按钮</button>
 </div>
 <div class="panel-footer">2018-1-20 22:47:06</div>
</div>

4.2.3 效果展示

Angular17之Angular自定义指令详解

4.2.4 改进

可以通过自定义属性指令的选择器来实现数据传输

》利用自定义属性指令的选择器作为输入属性myColor输入属性的别名

Angular17之Angular自定义指令详解

》在组件中直接利用自定义指令的选择器作为输入属性

Angular17之Angular自定义指令详解

<div class="panel panel-primary">
 <div class="panel panel-heading">实现自定义属性指令</div>
 <div class="panel-body">
 <button md-raised-button [appDirectiveTest02]="'yellow'">实现自定义指令的按钮</button>
 <br /><br />
 <button md-raised-button>未实现自定以指令的按钮</button>
 </div>
 <div class="panel-footer">2018-1-20 22:47:06</div>
</div>

》 效果展示

 

Angular17之Angular自定义指令详解 

4.3 响应用户操作

在自定义属性指令中通过监听DOM对象事件来进行一些操作

4.2.1 引入 HostListener 注解并编写一个方法

技巧01:HostListener注解可以传入两个参数

参数1 -> 需要监听的事件名称

参数2 -> 事件触发时传递的方法

@HostListener('click', ['$event'])
 onClick(ev: Event) {  }

4.2.2 在方法中实现一些操作 

@HostListener('click', ['$event'])
 onClick(ev: Event) {
 if (this.el.nativeElement === ev.target) {
 if (this.el.nativeElement.style.backgroundColor === 'green') {
 this.el.nativeElement.style.backgroundColor = 'skyblue';
 } else {
 this.el.nativeElement.style.backgroundColor = 'green';
 }
 }
 // if (this.el.nativeElement.style.backgroundColor === 'yellow') {
 // this.el.nativeElement.style.backgroundColor = 'green';
 // } else {
 // this.el.nativeElement.style.backgroundColor = 'yellow';
 // }
 }

4.2.3 在组件中标记自定义属性指令的选择器就可以啦

Angular17之Angular自定义指令详解

<div class="panel panel-primary">
 <div class="panel panel-heading">实现自定义属性指令</div>
 <div class="panel-body">
 <button md-raised-button appDirectiveTest02 >实现自定义指令的按钮</button>
 <br /><br />
 <button md-raised-button>未实现自定以指令的按钮</button>
 </div>
 <div class="panel-footer">2018-1-20 22:47:06</div>
</div>

4.2.4 代码汇总

import { Directive, ElementRef, OnInit, Input, HostListener } from '@angular/core';
@Directive({
 selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive implements OnInit {
 constructor(
 private el: ElementRef
 ) {}
 ngOnInit() {
 }
 @HostListener('click', ['$event'])
 onClick(ev: Event) {
 if (this.el.nativeElement === ev.target) {
 if (this.el.nativeElement.style.backgroundColor === 'green') {
 this.el.nativeElement.style.backgroundColor = 'skyblue';
 } else {
 this.el.nativeElement.style.backgroundColor = 'green';
 }
 }
 // if (this.el.nativeElement.style.backgroundColor === 'yellow') {
 // this.el.nativeElement.style.backgroundColor = 'green';
 // } else {
 // this.el.nativeElement.style.backgroundColor = 'yellow';
 // }
 }
}

总结

以上所述是小编给大家介绍的Angular17之Angular自定义指令详解,希望对大家有所帮助,如果大家有任何疑问欢迎各我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
puppeteer库入门初探
Jan 09 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 #Javascript
详解node.js中的npm和webpack配置方法
Jan 21 #Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 #jQuery
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 #Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 #Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 #Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 #Javascript
You might like
JAVA/JSP学习系列之七
2006/10/09 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
php中session与cookie的比较
2015/01/27 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
python同步windows和linux文件
2019/08/29 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
奥地利网上书店:Weltbild
2017/07/14 全球购物
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
优秀少先队工作者事迹材料
2014/05/13 职场文书
校运会口号
2014/06/18 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
Python列表的索引与切片
2022/04/07 Python