首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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自定义指令详解，希望对大家有所帮助，如果大家有任何疑问欢迎各我留言，小编会及时回复大家的！

Angular17之Angular自定义指令详解

- Author -

NeverCtrl_C

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
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
吸血鬼(1) 艾尔登法环(1) 暴雪(1) 我的世界(1) 遗弃(1) 东方异文石(1) 绿林侠盗(1) 小缇娜的奇幻之地(1) LOL(1) 战锤40K(1)
You might like
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
jQuery MD5加密实现代码
2010/03/15 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
基于js对象,操作属性、方法详解
2016/08/11 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
python字典键值对的添加和遍历方法
2016/09/11 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
哪些是python中web开发框架
2020/06/17 Python
Clarria化妆品官方网站：购买天然和有机化妆品系列
2018/04/08 全球购物
类和结构的区别
2012/08/15 面试题
毕业生造价工程师求职信
2013/10/17 职场文书
医科大学生毕业的自我评价分享
2013/11/12 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
优秀大学生自荐信
2015/03/26 职场文书
小学数学教学随笔
2015/08/14 职场文书