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 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 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
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
Python实现分段线性插值
2018/12/17 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
高中化学教学反思
2014/01/13 职场文书
养成教育经验材料
2014/05/26 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
工程款催款函
2015/06/24 职场文书
信息简报范文
2015/07/21 职场文书
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL