您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“angular指令和管道怎么用”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“angular指令和管道怎么用”吧!
指令是 Angular 提供的操作 DOM
的途徑。指令分為屬性指令
和結(jié)構(gòu)指令
。
屬性指令:修改現(xiàn)有元素的外觀或行為,使用 []
包裹。
結(jié)構(gòu)指令:增加、刪除 DOM 節(jié)點(diǎn)以修改布局,使用*
作為指令前綴。
1、內(nèi)置指令
1.1 *ngIf
根據(jù)條件渲染
DOM 節(jié)點(diǎn)或移除
DOM 節(jié)點(diǎn)。
<div *ngIf="data.length == 0">沒(méi)有更多數(shù)據(jù)</div>
<div *ngIf="data.length > 0; then dataList else noData"></div> <ng-template #dataList>課程列表</ng-template> <ng-template #noData>沒(méi)有更多數(shù)據(jù)</ng-template>
ng-template
是用來(lái)定義模板的,當(dāng)使用 ng-template
定義好一個(gè)模板之后,可以用 ng-container
和 templateOutlet
指令來(lái)進(jìn)行使用。
<ng-template #loading> <button (click)="login()">login</button> <button (click)="sigup()">sigup</button> </ng-template> <ng-container *ngTemplateOutlet="loading"> </ng-container>
1.2 [hidden]
根據(jù)條件顯示
DOM 節(jié)點(diǎn)或隱藏
DOM 節(jié)點(diǎn) (display)。
<div [hidden]="data.length == 0">課程列表</div> <div [hidden]="data.length > 0">沒(méi)有更多數(shù)據(jù)</div>
1.3 *ngFor
遍歷數(shù)據(jù)生成HTML結(jié)構(gòu)
interface List { id: number name: string age: number } list: List[] = [ { id: 1, name: "張三", age: 20 }, { id: 2, name: "李四", age: 30 } ]
<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; }
2、自定義指令
需求:為元素設(shè)置默認(rèn)背景顏色,鼠標(biāo)移入時(shí)的背景顏色以及移出時(shí)的背景顏色。
<div [appHover]="{ bgColor: 'skyblue' }">Hello Angular</div>
import { AfterViewInit, Directive, ElementRef, HostListener, Input } from "@angular/core" // 接收參的數(shù)類(lèi)型 interface Options { bgColor?: string } @Directive({ selector: "[appHover]" }) export class HoverDirective implements AfterViewInit { // 接收參數(shù) @Input("appHover") appHover: Options = {} // 要操作的 DOM 節(jié)點(diǎn) element: HTMLElement // 獲取要操作的 DOM 節(jié)點(diǎn) constructor(private elementRef: ElementRef) { this.element = this.elementRef.nativeElement } // 組件模板初始完成后設(shè)置元素的背景顏色 ngAfterViewInit() { this.element.style.backgroundColor = this.appHover.bgColor || "skyblue" } // 為元素添加鼠標(biāo)移入事件 @HostListener("mouseenter") enter() { this.element.style.backgroundColor = "pink" } // 為元素添加鼠標(biāo)移出事件 @HostListener("mouseleave") leave() { this.element.style.backgroundColor = "skyblue" } }
管道的作用是格式化組件模板數(shù)據(jù)
。
1、內(nèi)置管道
date 日期格式化
currency 貨幣格式化
uppercase 轉(zhuǎn)大寫(xiě)
lowercase 轉(zhuǎn)小寫(xiě)
json 格式化 json 數(shù)據(jù)
{{ date | date: "yyyy-MM-dd" }}
2、自定義管道
需求:指定字符串不能超過(guò)規(guī)定的長(zhǎng)度
<!-- 這是一... --> {{'這是一個(gè)測(cè)試' | summary: 3}}
// 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 : 50; return value.substr(0, actualLimit) + '...'; } }
// app.module.ts import { SummaryPipe } from './summary.pipe' @NgModule({ declarations: [ SummaryPipe ] });
到此,相信大家對(duì)“angular指令和管道怎么用”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。