Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to understand the instructions and channels and services in Angular. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have some understanding of the relevant knowledge after reading this article.

1. Instruction Directive

Directive is a way for Angular to manipulate DOM. Instructions are divided into attribute instructions and structure instructions.

Attribute directive: modify the appearance or behavior of an existing element, using [] wrappers.

Structural instructions: add or delete DOM nodes to modify the layout, using * as the instruction prefix

1.1 built-in instruction

1.1.1 * ngIf

Render DOM nodes or remove DOM nodes based on conditions

No more data, course list, no more data.

1.1.2 [hidden]

Show DOM nodes or hide DOM nodes (display) based on conditions

No more data.

1.1.3 * ngFor

Traversing data to generate HTML structure

Interface List {id: number name: string age: number} list: List [] = [{id: 1, name: "Zhang San", age: 20}, {id: 2, name: "Li Si", age: 30}] identify (index, item) {return item.id;}

1.2 Custom instruction

Requirements: set the default background color for the element, the background color when the mouse is moved in, and the background color when you move out

Hello Angular

Create a custom instruction

$ng g d appHover# full name ng generate directiveimport {AfterViewInit, Directive, ElementRef, HostListener Input} from "@ angular/core" / / number type interface Options {bgColor?: string} @ Directive ({selector: "[appHover]"}) export class HoverDirective implements AfterViewInit {/ / receive parameter @ Input ("appHover") appHover: Options = {} / / DOM node element: HTMLElement / / get the DOM node constructor (private elementRef: ElementRef) {this.element = this.elementRef.nativeElement to be operated } / / after the initial completion of the component template, set the background color of the element ngAfterViewInit () {this.element.style.backgroundColor = this.appHover.bgColor | | "skyblue"} / / add a mouse move event @ HostListener ("mouseenter") enter () {this.element.style.backgroundColor = "pink"} / / add a mouse move event @ HostListener ("mouseleave") leave () for the element {this.element.style.backgroundColor = "skyblue"} 2. Pipeline Pipe

The purpose of a pipe is to format component template data.

2.1 built-in piping

Date date formatting

Currency currency format

Uppercase turns uppercase

Lowercase to lowercase

Json formats json data

{{date | date: "yyyy-MM-dd"}}

2.2 Custom Piping

Requirement: the specified string cannot exceed the specified length

/ / summary.pipe.tsimport {Pipe, PipeTransform} from'@ angular/core';@Pipe ({name: 'summary'}); export class SummaryPipe implements PipeTransform {transform (value: string, limit?: number) {if (! value) return null; let actualLimit = (limit)? Limit: 10; return value.substr (0, actualLimit) + '...';} / app.module.tsimport {SummaryPipe} from'. / summary.pipe'@NgModule ({declarations: [SummaryPipe]}); 3. Service Service

3.1 create a service

$ng g s services/TestService-- skip-testsimport {Injectable} from'@ angular/core';@Injectable ({providedIn: 'root'}) export class TestService {} export class AppComponent {constructor (private testService: TestService) {} scope of the service

Using services, it is easy to share data across modules and components, depending on the scope of the service.

Register the service in the root injector, and all modules use the same service instance object

Import {Injectable} from'@ angular/core';@Injectable ({providedIn: 'root'}) export class CarListService {}

Register the service at the module level, where all components in the module use the same service instance object

Import {Injectable} from'@ angular/core';import {CarModule} from'. / car.module';@Injectable ({providedIn: CarModule,}) export class CarListService {} import {CarListService} from'. / car-list.service';@NgModule ({providers: [CarListService],}) export class CarModule {}

Register the service at the component level, which and its subcomponents use the same service instance object

Import {Component} from'@ angular/core';import {CarListService} from'.. / car-list.service.ts'@Component ({selector: 'app-car-list', templateUrl:'. / car-list.component.html', providers: [CarListService]})

On how to understand Angular instructions and channels and services to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.