原文出處:https://blog.csdn.net/crper/article/details/68065696 (原文更易閱讀)
前言
管道這東西,可以讓用戶的體驗變得好,也可以省去我們一些重複性的工作;
官方的內置管道就不解釋了。。自行看文檔吧
管道的常規使用
一般是用於Mustache語法的雙向數據內,eg: {{item | json}}
上面的例子是用了內置的JsonPipe管道。。有人說管道帶參數怎麼搞?,eg :{{item |slice:0:4 }}
管道後面冒號跟隨的就是參數, 也許還有人問如何多重管道調用? , eg :{{item | slice:0:4 | uppercase}}
這裏看出來了麼,這是使用了數據流的概念,用過linux管道的小夥伴一看就知道了。。item 的輸入數據
給slice處理後再丟給uppercase處理,最終返回的結果集就是切割後並且轉爲大寫字符的數據
書寫一個自定義管道
Demo寫法
// 自定義管道必須依賴這兩個
import { Pipe, PipeTransform } from '@angular/core';
// 管道裝師符 , name就是管道名稱
@Pipe({
name: 'name'
})
export class PipeNamePipe implements PipeTransform {
// value : 就是傳入的值
// ...args : 參數集合(用了...拓展符),會把數組內的值依次作爲參數傳入
// ...args可以改成我們常規的寫法(value:any,start:number,end:number)
transform(value: any, ...args: any[]): any {
}
}
實現一個切割字符串然後拼接…的管道【用於渲染數據過長截取】
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'SliceStr'
})
export class SliceStrPipe implements PipeTransform {
/**
* 截圖字符串字符
* option(start,end,[+str])
*/
// start和end及extraStr後面都跟隨了一個問好,代表這個爲可選參數而不是必選的
// 功能就是給出截圖的啓示,然後是否拼接你自定義的字符串(...)等
transform(value: string, start?: number, end?: number, extraStr?: string): string {
// console.log( value );
if (value) {
if (typeof (start) === 'number' && typeof (end) === 'number') {
if (value.length > end && extraStr && typeof (extraStr) === 'string') {
// console.log( start, end, extraStr );
return value.slice(start, end) + extraStr.toString();
} else {
return value.slice(start, end);
}
} else {
return value;
}
} else {
return value;
}
}
}
上面的效果圖,結合[title]實現數據截取,懸浮看到完整的數據
局部代碼的寫法 — 這是視圖綁定的使用方法,那若是放在ts裏面如何使用一個管道呢。。且看我道來
<td [title]="item.SupplierName">{{item.SupplierName | SliceStr:0:13:'...' || '' }}</td>1
局部代碼的寫法 — ts內管道處理數據
// 引入日期轉換管道
import { TransDatePipe } from '../../../../../widgets/mit-pipe/TransDate/trans-date.pipe';
// 使用自定義管道處理ts內的數據
const PublishDate: new TransDatePipe().transform(res.Data.PublishDate) || '',
如何使一個自定義管道生效
單一引入生效
// 功能管道
import { SliceStrPipe } from './SliceStr/slice-str.pipe';
@NgModule( {
imports: [
CommonModule
],
declarations: [
SliceStrPipe // 管道生效必須放到declarations裏面
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
模塊引入
我們這邊,是寫了一組管道,然後放到一個自定義模塊裏面,最後導出
在其他模塊引入這個模塊就能直接使用了。。
import ..........
const pipe = [
IsCitizenIDPipe,
IsEmailPipe,
IsEnhancePasswordPipe,
IsFixedPhonePipe,
IsLicensePipe,
IsMobilePhonePipe,
IsNormalPasswordPipe,
IsNumberPipe,
IsUsernamePipe,
SliceStrPipe,
TimeDifferencePipe,
TransDatePipe,
ThousandSeparationPipe
];
@NgModule( {
imports: [
CommonModule
],
declarations: [
MitPipeComponent,
...pipe,
],
exports: [ ...pipe ],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class MitPipeModule { }
// ----- 引入module
// 管道 -- 把MitPipeModule丟到imports裏面就行了
import { MitPipeModule } from '../../../../../widgets/mit-pipe/mit-pipe.module';
總結
管道的寫法並不複雜,複雜的是你想要在管道內實現怎麼樣的功能,考慮拓展性,可讀性,複用性!