Detailed explanation of how to create custom instructions in Angular

This article will introduce to you how to customize the creation of instructions inAngular. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Introduction to directives

There are three types of directives in Angular:

• Components have template instructions. Components inherit from instructions and just extend the class and UI-related attributes.

• Attribute-type directives are directives that change the behavior and appearance of DOM elements, components, or other directives. For example, NgStyle, NgClass.

• Structural directives are directives that change the DOM layout by adding or removing DOM elements. For example, NgIf, NgFor.

However, in actual development, according to business needs, we often expand the instructions of Angular components to facilitate business development. Let's take a look at how to create your own directive. [Related recommendations: "angular Tutorial"]

Create attribute-type instructions

In Angular, attribute-type instructions Creation requires at least a controller class with a@Directivedecorator. This decorator specifies a selector name that identifies the attribute name associated with the directive. The controller class implements the functional behavior of the directive.

Next, we create a simple command to change the background color when the mouse hovers over the element; when the mouse moves away, the background color disappears; when the mouse is clicked, the font size becomes larger; when the mouse is released , the font returns to its original functionality.

Instruction implementation

Create the background-exed.directive.ts file and implement the following code:

import { Directive, HostListener, ElementRef, Renderer2, HostBinding } from '@angular/core'; @Directive({ selector: '[appBackgroundExe]' }) export class BackgroundExeDirective { @Input('appBackgroundExe') highLightColor: string; constructor(private elementRef: ElementRef, private renderer: Renderer2) { // 这种写法比较丑陋 // this.elementRef.nativeElement.style.background = 'yellow'; // 推荐这种写法， Renderer this.renderer.setStyle(this.elementRef.nativeElement, 'background', 'yellow'); } @HostBinding('class.pressed') isPressed: boolean; @HostListener('mouseenter') onMouseEnter(): void { this.highLight(this.highLightColor); } @HostListener('mouseleave') onMouseLeave(): void { this.highLight(null); } @HostListener('mousedown') onMouseDown(): void { this.isPressed = true; } @HostListener('mouseup') onMouseUp(): void { this.isPressed = false; } private highLight(color: string): void { // this.elementRef.nativeElement.style.background = color; this.renderer.setStyle(this.elementRef.nativeElement, 'background', color); } }

Among them,selector: '[appBackgroundExe]'Is the attribute name associated with the directive so that Angular can find the HTML code associated with this directive from the template when compiling. In the

constructor, instances of theElementRefandRenderer2modules are injected. ThroughElementRefwe can reference the DOM element identified by the instruction and perform related operations on it; and we can use the API provided byRenderer2to perform related rendering operations on the element.

@HostListenerand@HostBindingare property decorators.@HostListeneris used to add event listening to the host element; and the element marked by the instruction is the host element.@HostBindingis used to dynamically set the attribute value of the host element.

Set font style

• appliation.component.less

.pressed { font-size: 30px; }

Use directives in templates

• application.component.html

 
鼠标移进，元素变成红色。鼠标移出，元素红色消失
 

Create structural directive

structural directive Creation is similar to attribute-based instruction creation.

Instruction implementation

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[appIf]' }) export class IfDirective { constructor( private templateRef: TemplateRef, private viewContainerRef: ViewContainerRef ) { } @Input('ifCreat') set condition(condition: boolean) { if (condition) { this.viewContainerRef.createEmbeddedView(this.templateRef); } else { this.viewContainerRef.clear(); } } }

Among them,TemplateRefrepresents the embedded template template element through which embedded views can be created.ViewContainerRefrepresents a view container to which one or more views can be added, through which inline views or component views based onTemplateRefinstances can be created and managed.

Using directives in templates

• application.component.html

 
hello
 

Summary

This article mainly introduces how to customize the creation instructions in Angular. In actual development, we can flexibly create the instructions we want.

For more programming-related knowledge, please visit:Programming Teaching! !

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