Angular learning talks about Directive instructions
Nov 04, 2022 pm 07:39 PMThis article will take you to continue learning angular and briefly understand the use of Directive instructions in angular. I hope it will be helpful to everyone!
Directive is used to modify the DOM to add additional behavior to it. [Related tutorial recommendations: angularjs video tutorial, Programming video]
Angular built-in instructionsangular.cn/guide/built…
For example, *ngFor
commonly used in development is an instruction used to traverse and render DOM elements.
You can refer to the link below. I have written use cases for these instructions.
Here I will mainly introduce how to customize your own instructions
For example, we want the DOM background color to switch when the mouse moves in/out
<!-- 默认 鼠标移入时背景变成黄色 --> <p highlight>Highlight me!</p> <!-- 指定颜色 鼠标移入时背景变成红色 --> <p highlight="red">Highlight me!</p>
Let’s implement this example
import { Directive, ElementRef, HostListener, Input } from '@angular/core'; // Directive装饰器 可以接收一个对象参数 但是现在我们还不需要 @Directive() export class HighlightDirective { // 给这个指定定义一个 highlight 属性 @Input() highlight = 'yellow'; // 这里的 el 就是被我们的指令直接修饰的那个dom constructor(private el: ElementRef) { // 你可以在这里直接操作 dom } // 给这个dom定义一个mouseenter的监听器 后面的名字可以自定定义 @HostListener('mouseenter') onMouseEnter() { this.highlight(this.highlight); } // 添加鼠标移出的监听器 绑定对应的事件逻辑 @HostListener('mouseleave') onMouseLeave() { this.highlight(''); } private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; } }
For more programming-related knowledge, please visit:Programming Teaching! !
The above is the detailed content of Angular learning talks about Directive instructions. For more information, please follow other related articles on the PHP Chinese website!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

An article about memory control in Node

Explore how to write unit tests in Vue3

Let's talk in depth about the File module in Node

PHP and Vue: a perfect pairing of front-end development tools

How to solve cross-domain issues? A brief analysis of common solutions

Questions frequently asked by front-end interviewers

How to use Go language for front-end development?
