Analisis mendalam arahan, paip dan perkhidmatan dalam Angular

Apakah arahan, paip dan perkhidmatan dalam Angular? Artikel berikut akan membawa anda melalui arahan, saluran paip dan perkhidmatan dalam Angular Saya harap ia akan membantu anda!

1. Perintah Directive

arahan ialah cara yang disediakan oleh Angular untuk mengendalikan DOM. Arahan dibahagikan kepada arahan atribut dan arahan struktur. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

arahan atribut: Ubah suai rupa atau gelagat elemen sedia ada dan gunakan pakej [].

Perintah struktur: tambah dan padam DOM nod untuk mengubah suai reka letak, gunakan * sebagai awalan arahan

1.1 Perintah terbina dalam

1.1.1 *ngIf

Render DOM nod atau alih keluar DOM nod berdasarkan syarat

<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]

Tunjukkan DOM nod atau sembunyikan DOM nod (display) mengikut syarat

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

1.1 .3 *ngFor

Melintasi data untuk menjana struktur 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 Arahan tersuai

Keperluan: Tetapkan warna latar belakang lalai untuk elemen, warna latar belakang apabila tetikus bergerak masuk dan warna latar belakang apabila tetikus bergerak keluar

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

• Buat arahan tersuai

$ 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 fungsi paip adalah untuk memformat data templat komponen. Pipe

2.1 Saluran paip terbina dalam

Pemformatan tarikh

• date

  Pemformatan mata wang

• currency

  Tukar kepada huruf besar

• uppercase

  Tukar kepada huruf kecil

• lowercase

  Format
data

• jsonjson

2.2 Talian Paip Tersuai

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

Keperluan : Rentetan yang ditentukan tidak boleh melebihi panjang yang ditentukan

3 Perkhidmatan

// 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] 
});

Service3.1 Cipta perkhidmatan

3.2 Skop Perkhidmatan

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

Menggunakan perkhidmatan boleh berkongsi data dengan mudah merentas modul dan komponen, bergantung pada skop perkhidmatan.

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

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

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

Daftar perkhidmatan dalam penyuntik akar, semua modul menggunakan objek contoh perkhidmatan yang sama

• Daftar perkhidmatan di peringkat modul , Semua komponen dalam modul menggunakan objek contoh perkhidmatan yang sama

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

• untuk mendaftar perkhidmatan di peringkat komponen Komponen dan subkomponennya menggunakan objek contoh perkhidmatan yang sama

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

• Alamat asal: https://juejin.cn/post/7008357218210807838

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

Pengarang: Qian Yi_08>

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:
Video Pengaturcaraan

! !

Atas ialah kandungan terperinci Analisis mendalam arahan, paip dan perkhidmatan dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!