Eine ausführliche Analyse von Direktiven, Pipes und Services in Angular

Was sind Anweisungen, Pipes und Services in Angular? Der folgende Artikel führt Sie durch die Anweisungen, Pipelines und Dienste in Angular. Ich hoffe, er ist hilfreich für Sie!

1. Direktive DirectiveDirective

指令是 Angular 提供的操作 DOM 的途径。指令分为属性指令和结构指令。【相关教程推荐：《angular教程》】

属性指令：修改现有元素的外观或行为，使用 [] 包裹。

结构指令：增加、删除 DOM 节点以修改布局，使用*作为指令前缀

1.1 内置指令

1.1.1 *ngIf

根据条件渲染 DOM 节点或移除 DOM 节点

<div *ngIf="data.length == 0">没有更多数据</div>

<div *ngIf="data.length > 0; then dataList else noData"></div>
<ng-template #dataList>课程列表</ng-template>
<ng-template #noData>没有更多数据</ng-template>

1.1.2 [hidden]

根据条件显示 DOM 节点或隐藏 DOM 节点 (display)

<div [hidden]="data.length === 0">没有更多数据</div>

1.1.3 *ngFor

遍历数据生成HTML结构

interface List {
  id: number
  name: string
  age: number
}

list: List[] = [
  { id: 1, name: "张三", age: 20 },
  { id: 2, name: "李四", age: 30 }
]

<!--  
    i: 索引
    isEven: 是否为偶数行
    isOdd: 是否为奇数行
    isFirst: 是否是第一项
    isLast: 是否是最后一项
-->
<li
    *ngFor="
      let item of list; 
      let i = index;
      let isEven = even;
      let isOdd = odd;
      let isFirst = first;
      let isLast = last;
    "
></li>

<li *ngFor="let item of list; trackBy: identify"></li>

identify(index, item){
  return item.id; 
}

1.2 自定义指令

需求：为元素设置默认背景颜色，鼠标移入时的背景颜色以及移出时的背景颜色

<div [appHover]="{ bgColor: &#39;skyblue&#39; }">Hello Angular</div>

• 创建自定义指令

$ ng g d appHover
# 全称 ng generate directive

import { AfterViewInit, Directive, ElementRef, HostListener, Input } from "@angular/core"

// 接收参的数类型
interface Options {
  bgColor?: string
}

@Directive({
  selector: "[appHover]"
})
export class HoverDirective implements AfterViewInit {
  // 接收参数
  @Input("appHover") appHover: Options = {}
  // 要操作的 DOM 节点
  element: HTMLElement
  // 获取要操作的 DOM 节点
  constructor(private elementRef: ElementRef) {
    this.element = this.elementRef.nativeElement
  }
  // 组件模板初始完成后设置元素的背景颜色
  ngAfterViewInit() {
    this.element.style.backgroundColor = this.appHover.bgColor || "skyblue"
  }
  // 为元素添加鼠标移入事件
  @HostListener("mouseenter") enter() {
    this.element.style.backgroundColor = "pink"
  }
  // 为元素添加鼠标移出事件
  @HostListener("mouseleave") leave() {
    this.element.style.backgroundColor = "skyblue"
  }
}

---

2. 管道 Pipe

管道的作用是格式化组件模板数据。

2.1 内置管道

• date 日期格式化

• currency 货币格式化

• uppercase 转大写

• lowercase 转小写

• json 格式化json 数据

<p>{{ date | date: "yyyy-MM-dd" }}</p>

2.2 自定义管道

需求：指定字符串不能超过规定的长度

// summary.pipe.ts
import { 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.ts
import { SummaryPipe } from './summary.pipe'
@NgModule({
    declarations: [SummaryPipe] 
});

3. 服务 Service

Directive ist die von Angular bereitgestellte Möglichkeit, DOM zu bedienen. Anweisungen werden in Attributanweisungen und Strukturanweisungen unterteilt. [Empfohlene verwandte Tutorials: „

angular Tutorial“]Attributanweisungen: Ändern Sie das Erscheinungsbild oder Verhalten vorhandener Elemente und verwenden Sie [], um es zu umschließen.

Strukturanweisungen: Fügen Sie DOM-Knoten hinzu und löschen Sie sie, um das Layout zu ändern. Verwenden Sie * als Anweisungspräfix.

1.1 Integrierte Anweisungen

1.1 .1 *ngIf

• Rendern Sie DOM-Knoten oder entfernen Sie DOM-Knoten entsprechend den Bedingungen

$ ng g s services/TestService --skip-tests

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TestService { }

• 1.1 .2 [hidden]

Zeigen Sie DOM-Knoten an oder verbergen Sie DOM-Knoten entsprechend den Bedingungen (display)

export class AppComponent {
  constructor (private testService: TestService) {}
}

1.1.3 *ngFor

Durchlaufen Sie die Daten, um die HTML-Struktur zu generieren

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class CarListService {
}

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

import { Component } from '@angular/core';
import { CarListService } from '../car-list.service.ts'

@Component({
  selector:    'app-car-list',
  templateUrl: './car-list.component.html',
  providers:  [ CarListService ]
})

1.2 Benutzerdefinierte Anweisungen

🎜🎜🎜Anforderungen: Legen Sie die Standardhintergrundfarbe für das Element fest Hintergrundfarbe, wenn die Maus hinein bewegt wird, und die Hintergrundfarbe, wenn sich die Maus heraus bewegt. Hintergrundfarbe🎜rrreee🎜🎜🎜Benutzerdefinierte Anweisungen erstellen🎜🎜🎜rrreeerrreee

---

🎜🎜2. Pipe Pipe🎜🎜 🎜Die Rolle der Pipe besteht darin, Komponentenvorlagendaten zu formatieren. 🎜🎜🎜🎜2.1 Integrierte Pipeline🎜🎜🎜🎜🎜🎜Datum Datumsformatierung🎜🎜🎜🎜Währung Währungsformatierung🎜🎜🎜🎜Großbuchstaben In Großbuchstaben konvertieren 🎜🎜🎜🎜lowercase In Kleinbuchstaben konvertieren 🎜🎜🎜🎜json json Daten formatieren 🎜🎜🎜rrreee🎜🎜🎜2.2 Benutzerdefiniert Pipeline🎜🎜🎜🎜Anforderungen: Die angegebene Zeichenfolge darf die angegebene Länge nicht überschreiten 🎜 🎜 Benutzen Services erleichtert den Austausch von Daten zwischen Modulen und Komponenten, abhängig vom Umfang des Dienstes. 🎜🎜🎜🎜Registrieren Sie den Dienst im Root-Injektor. Alle Module verwenden dasselbe Dienstinstanzobjekt.🎜rrreee🎜🎜🎜Registrieren Sie den Dienst auf Modulebene. Alle Komponenten im Modul verwenden dasselbe Dienstinstanzobjekt Beim Registrierungsdienst auf Komponentenebene verwenden diese Komponente und ihre Unterkomponenten dasselbe Dienstinstanzobjekt Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine ausführliche Analyse von Direktiven, Pipes und Services in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!