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 相关文章推荐
javascript中对对层的控制
Dec 29 Javascript
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
linux下为php添加curl扩展的方法
2011/07/29 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
php二维数组排序详解
2013/11/06 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
node实现登录图片验证码的示例代码
2018/04/20 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
python读文件的步骤
2019/10/08 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
大专生找工作自荐书
2014/06/10 职场文书
写给医院的感谢信
2015/01/22 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python