Angular17之Angular自定义指令详解

2024-03-02 17:13:28

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　

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：自定义指令一般会被多次用到，所以一般会将自定义指令模块导入到共享模块在从共享模块导出，这样其它模块只需要导入共享模块就可以啦

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元数据指定的

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

<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

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：在给输入属性赋值时，等号右边如果不是一个变量就需要用单引号括起来

<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 效果展示

　　　　4.2.4 改进

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

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

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

<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>

　　　　　　》效果展示　　　

　　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 在组件中标记自定义属性指令的选择器就可以啦

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

您可能感兴趣的文章:

Angularjs自定义指令实现三级联动选择地理位置
详解angular2采用自定义指令（Directive）方式加载jquery插件
在 Angular2 中实现自定义校验指令（确认密码）的方法
Angular的自定义指令以及实例
AngularJS创建自定义指令的方法详解
AngularJS使用自定义指令替代ng-repeat的方法
AngularJS 自定义指令详解及实例代码
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
深入讲解AngularJS中的自定义指令的使用
详解AngularJS中自定义指令的使用

深入讲解AngularJS中的自定义指令的使用

AngularJS的自定义指令,就是你自己的指令,加上编译器编译DOM时运行的原生核心函数.这可能很难理解.现在,假设我们想在应用中不同页面复用一些特定的代码,而又不复制代码.那么,我们就可以简单地把这段代码放到单独的文件,并调用使用自定义指令的代码,而不是一遍又一遍地敲下来.这样的代码更容易理解.AngularJS中有四种类型的自定义指令: 元素指令属性指令 CSS class 指令注释指令在我们现有的app中实现他们之前,我们来看看自定义指令是个什么样子: 元素指令在html中写
Angularjs自定义指令实现三级联动选择地理位置

Angularjs自定义指令实现三级联动效果,先上图代码 <html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport&quo
AngularJS使用自定义指令替代ng-repeat的方法

前言大家都知道对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的方法更好一些.特别是数据大多都是静态的或已预存储好的,这个时候应避免使用ng-repeat指令. ng-repeat中的表达式和 $watch Angular中的表达式都会创建$watch 的Scope 函数.用于监听模型变化,当你的模型部分发生变化时它会通知你.在ng-repeat指令中,如果某行数据有15列数据都绑定了表达式,如果数据有1000多行的话,那么$watch就又奖金15
在 Angular2 中实现自定义校验指令（确认密码）的方法

我们会在本文中探索 Angular 2 内建的自定义验证. # 介绍 Angular 2 原生就支持一些有用的验证器: required: 验证字段必须存在 minlength: 验证字段值的最小长度有效 maxlength: 验证字段值的最大长度有效 pattern: 验证输入的值是否匹配给定的模板,比如 email 我们会基于下面的接口创建一个表单来获取用户信息. // user.interface.ts export interface User { username: string; /
详解angular2采用自定义指令（Directive）方式加载jquery插件

由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目, 那么如何把jquery插件放到angular2中呢?采用自定义指令! 在上下文之前要引入jquery,这点不再描述首先创建一个指令,采用@input方式,来获取jquery插件所需要的参数. 在ngOnChanges时,也就是参数通过@input传入时,初始化jquery插件, 初始化jquery插件需要获取dom元素,所以我们引入ElementRef,用来获取dom元素这里需要讲一下,jqu
Angular的自定义指令以及实例

前面的文章介绍了很多angular自带的指令,下面我们看看如何使用directive自定义指令. 先看一个例子: <body> <div my-hello></div> </body> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.directive('myHello',function(){ return { restrict
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴
详解AngularJS中自定义指令的使用

自定义指令中使用AngularJS扩展HTML的功能.自定义指令使用的"指令"的功能定义.自定义指令只是替换了它被激活的元素.引导过程中AngularJS应用程序找到了匹配的元素,并做好使用自定义指令compile()方法一次活动再处理使用基于指令的范围自定义指令link()方法的元素. AngularJS提供支持,以下列元素的类型来创建自定义指令. Element directives - 指令遇到时激活一个匹配的元素. Attribute - - 指令遇到时激活一个匹配的属性. C
AngularJS 自定义指令详解及实例代码

AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容. 前面提到AngularJS的四大特性: 1 MVC 2 模块化 3 指令 4 双向数据绑定下面将会介绍如下的内容: 1 如何自定义指令 2 自定义指令的使用 3 自定义指令的内嵌使用如何自定义指令: Angular是基于模块的框架,因此上来肯定要创建一个自己的模块: var myAppModule = angular.module("myApp",[]); 然后在此模块基础上创建指令d
AngularJS创建自定义指令的方法详解

本文实例讲述了AngularJS创建自定义指令的方法.分享给大家供大家参考,具体如下: 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令,比如说n