Maison >interface Web >js tutoriel >Une analyse approfondie des directives, des tuyaux et des services dans Angular
Que sont les instructions, les tuyaux et les services dans Angular ? L'article suivant vous présentera les instructions, les pipelines et les services de Angular. J'espère qu'il vous sera utile !
Directive
Directive
指令是 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: 'skyblue' }">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" } }
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] });
Service
Angular
pour faire fonctionner le DOM
. Les instructions sont divisées en instructions d'attribut et instructions de structure. [Tutoriels associés recommandés : "Tutoriel angulaire"]Instructions d'attribut : modifiez l'apparence ou le comportement des éléments existants et utilisez []
pour les envelopper.
DOM
pour modifier la disposition, utilisez *
comme préfixe d'instruction
1.1 Instructions intégrées*ngIf
Render les nœuds DOM
ou supprimer les nœuds DOM
selon les conditions$ ng g s services/TestService --skip-tests
import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class TestService { }
1.1 .2 [hidden]
DOM
ou masquer les nœuds DOM
selon les conditions (affichage
)export class AppComponent { constructor (private testService: TestService) {} }Parcourez les données pour générer la structure HTML
1.1.3*ngFor
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 Instructions personnalisées
🎜🎜🎜Exigences : Définissez la couleur d'arrière-plan par défaut pour l'élément, le couleur d'arrière-plan lorsque la souris entre et la couleur d'arrière-plan lorsque la souris sort Couleur d'arrière-plan🎜rrreee🎜🎜🎜Créer des instructions personnalisées🎜🎜🎜rrreeerrreeedate
Formatage de la date🎜🎜🎜🎜devise
Formatage de la devise🎜🎜🎜🎜majuscule
Convertir en majuscules 🎜🎜🎜🎜minuscules
Convertir en minuscules 🎜🎜🎜🎜json
Formater les données json
🎜🎜🎜rrreee🎜🎜🎜2.2 Personnalisé Pipeline🎜🎜🎜🎜Exigences : La chaîne spécifiée ne peut pas dépasser la longueur spécifiée🎜rrreeerrreee🎜🎜3 ServiceService
🎜🎜🎜🎜🎜3.1 Créer un service🎜🎜🎜rrreeerrreeerrreee🎜3.2 Portée du service🎜 🎜 Utilisation Les services facilitent le partage de données entre modules et composants, en fonction de la portée du service. 🎜🎜🎜🎜Enregistrez le service dans l'injecteur racine, tous les modules utilisent le même objet d'instance de service🎜rrreee🎜🎜🎜Enregistrez le service au niveau du module, tous les composants du module utilisent le même objet d'instance de service🎜rrreeerrreee🎜🎜🎜Dans le service d'enregistrement au niveau du composant, ce composant et ses sous-composants utilisent le même objet d'instance de service🎜rrreee🎜🎜🎜🎜Adresse originale : https://juejin.cn/post/7008357218210807838🎜🎜🎜Auteur : Qianyi_0810🎜🎜🎜Plus pour connaissances liées à la programmation, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!