Detailed explanation of the use of custom instructions in Angular17

This time I will bring you a detailed explanation of the use of custom instructions in Angular17, and what are the precautions when using custom instructions in Angular17. The following is a practical case, let's take a look.

1 What is HTML

HTML document is a plain text file that contains HTML elements, CSS styles and JavaScriptcode; HTML elements are rendered by tags, and the browser will Each tag creates a DOM object with attributes, and the browser renders the content by rendering these DOM nodes. The content the user sees in the browser is the result of the browser rendering the DOM object.

2 Classification of instructions

˜Components, attribute directives, structural directives

 For specific knowledge points, please refer to "Angular2 Revealed"

3 refers to some constants commonly used in defining instructions

  3.1 Directive

Used to decorate the controller class to indicate that the controller class is a custom command controller class

  3.2 ElementRef

Used as a reference to a DOM object, dependency injection is performed through the constructor. Its instance represents the DOM object of the element marked with a custom instruction; each element marked with a custom instruction will automatically have an ElementRef object. as a reference to the element's DOM object (prerequisite: ElementRef is dependently injected in the controller of the custom directive)

  3.3 Render2

Instances of Render2 are used to operate DOM nodes, because Angular does not recommend directly operating DOM nodes; Render2 is only supported from Angular4, and previous versions used Render; each element marked with a custom instruction will have a Render2 instance to operate the DOM attribute of the element (prerequisite: Render2 is dependency injected in the controller of the custom directive)

  3.4 HostListener

Annotations used to decorate event triggering methods

4 Custom attribute directive

 A custom attribute directive requires a controller class decorated with @Directive decorator

import { Directive } from '@angular/core';
@Directive({
 selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive {
 constructor() { }
}

4.1 Implement custom attribute instructions

    4.1.1 Create a custom attribute command control class

Tip 01: Create a module to specifically place custom instructions

ng g d directive/test/directive-test02 --spec=false --module=directive

# 　##    4.1.2 Dependency injection ElementRef  in the controller class

constructor(
 private el: ElementRef
 ) {}

     4.1.3 Change the background color of the DOM object corresponding to the element marked with a custom instruction through an ElementRef instance 

 ngOnInit() {
  this.el.nativeElement.style.backgroundColor = 'skyblue';
 }

     4.1.3 Specify 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 { }

in the custom instruction module    4.1.4 Import the custom instruction module into the module where the component that needs to use the specified instruction is located

Tip 01: Custom instructions are generally used multiple times, so the custom instruction module is generally imported into the shared module and exported from the shared module, so that other modules only need to import the shared module

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 Just use the selector corresponding to the custom component in the component

The selector of a custom directive is specified by the selector metadata of the @Directive decorator

Just mark the selector of the custom directive directly in the element.     4.1.6 Code Summary

<p class="panel panel-primary">
  <p class="panel panel-heading">实现自定义属性指令</p>
  <p class="panel-body">
    <button md-raised-button appDirectiveTest02>实现自定义指令的按钮</button>
    <br /><br />
    <button md-raised-button>未实现自定以指令的按钮</button>
  </p>
  <p class="panel-footer">2018-1-20 22:47:06</p>
</p>

4.2 Bind input attributes to custom attribute instructions

In the custom attribute instructions implemented in 4.1, the background color is hard-coded and cannot be changed. We can bind input attributes to the instructions to achieve data transfer, so as to achieve the purpose of dynamic change

     4.2.1 Add an input attribute myColor

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';
 }
}

in the controller of the custom attribute directive      4.2.2 Assign a value to the myColor property in the component

      技巧01：在给输入属性赋值时，等号右边如果不是一个变量就需要用单引号括起来
View Code
    4.2.3 效果展示

    4.2.4 改进

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

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

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

View Code
      》 效果展示

  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';
 // }
 }

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

实现react服务器渲染的步奏详解

JS里EventLoop的使用详解

The above is the detailed content of Detailed explanation of the use of custom instructions in Angular17. For more information, please follow other related articles on the PHP Chinese website!