Angular17之Angular自定义指令详解

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 

     

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/235.html