Home Web Front-end JS Tutorial Angular learning talks about Directive instructions

Angular learning talks about Directive instructions

Nov 04, 2022 pm 07:39 PM
front end angular.js

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

Angular learning talks about Directive instructions

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.

rick-chou.github.io/angular-tut…

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>
Copy after login

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;
  }
}
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

An article about memory control in Node An article about memory control in Node Apr 26, 2023 pm 05:37 PM

An article about memory control in Node

Explore how to write unit tests in Vue3 Explore how to write unit tests in Vue3 Apr 25, 2023 pm 07:41 PM

Explore how to write unit tests in Vue3

Let's talk in depth about the File module in Node Let's talk in depth about the File module in Node Apr 24, 2023 pm 05:49 PM

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

PHP and Vue: a perfect pairing of front-end development tools PHP and Vue: a perfect pairing of front-end development tools Mar 16, 2024 pm 12:09 PM

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

How to solve cross-domain issues? A brief analysis of common solutions How to solve cross-domain issues? A brief analysis of common solutions Apr 25, 2023 pm 07:57 PM

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

Questions frequently asked by front-end interviewers Questions frequently asked by front-end interviewers Mar 19, 2024 pm 02:24 PM

Questions frequently asked by front-end interviewers

Learn more about Buffers in Node Learn more about Buffers in Node Apr 25, 2023 pm 07:49 PM

Learn more about Buffers in Node

How to use Go language for front-end development? How to use Go language for front-end development? Jun 10, 2023 pm 05:00 PM

How to use Go language for front-end development?

See all articles