\u5728 Angular \u5f00\u53d1\u4e2d，\u7ba1\u9053（Pipe）\u662f\u5904\u7406\u6570\u636e\u683c\u5f0f\u5316\u7684\u6838\u5fc3\u5de5\u5177，Angular \u5185\u7f6e\u7684date\u3001uppercase\u3001currency\u7b49\u7ba1\u9053\u80fd\u6ee1\u8db3\u57fa\u7840\u9700\u6c42，\u4f46\u9762\u5bf9\u590d\u6742\u7684\u4e1a\u52a1\u573a\u666f（\u5982\u591a\u7ef4\u5ea6\u6570\u636e\u8f6c\u6362\u3001\u72b6\u6001\u6620\u5c04\u3001\u4e2a\u6027\u5316\u683c\u5f0f\u5316），\u81ea\u5b9a\u4e49\u7ba1\u9053\u6210\u4e3a\u63d0\u5347\u4ee3\u7801\u590d\u7528\u6027\u548c\u53ef\u7ef4\u62a4\u6027\u7684\u5173\u952e\u3002\u672c\u6587\u5c06\u4ece\u5b9e\u9645\u4e1a\u52a1\u573a\u666f\u51fa\u53d1，\u8be6\u89e3\u5982\u4f55\u901a\u8fc7\u81ea\u5b9a\u4e49\u7ba1\u9053\u5c01\u88c5\u590d\u6742\u903b\u8f91，\u8ba9\u6a21\u677f\u66f4\u7b80\u6d01\u3001\u4e1a\u52a1\u66f4\u805a\u7126\u3002<\/p>\n
\u5728\u5f00\u59cb\u7f16\u7801\u524d，\u5148\u660e\u786e\u81ea\u5b9a\u4e49\u7ba1\u9053\u7684\u6838\u5fc3\u4f18\u52bf：<\/p>\n
Angular \u63d0\u4f9b\u4e86ng generate pipe（\u7b80\u5199ng g p）\u547d\u4ee4\u5feb\u901f\u751f\u6210\u7ba1\u9053\u6a21\u677f，\u4ee5 \u201c\u8ba2\u5355\u72b6\u6001\u683c\u5f0f\u5316\u201d \u4e3a\u4f8b：<\/p>\n
# \u751f\u6210\u72b6\u6001\u683c\u5f0f\u5316\u7ba1\u9053
\nng g p pipes\/order-status<\/p>\n
\u751f\u6210\u7684\u57fa\u7840\u7ed3\u6784\u5305\u542b\u4e24\u4e2a\u6838\u5fc3\u90e8\u5206：<\/p>\n
\u4e1a\u52a1\u9700\u6c42：\u5c06\u8ba2\u5355\u72b6\u6001\u7801（\u6570\u5b57）\u8f6c\u6362\u4e3a\u4e2d\u6587\u540d\u79f0 + \u5bf9\u5e94\u6837\u5f0f\u7c7b，\u59820\u2192\u5f85\u652f\u4ed8（warning）\u30011\u2192\u5df2\u652f\u4ed8（success）\u30012\u2192\u5df2\u53d6\u6d88（danger）\u3002<\/p>\n
\/\/ src\/app\/pipes\/order-status\/order-status.pipe.ts
\nimport { Pipe, PipeTransform } from '@angular\/core';<\/p>\n
\/\/ \u5b9a\u4e49\u72b6\u6001\u6620\u5c04\u63a5\u53e3，\u63d0\u5347\u7c7b\u578b\u5b89\u5168\u6027
\ninterface OrderStatusMap {
\n label: string;
\n class: string;
\n}<\/p>\n
@Pipe({
\n name: 'orderStatus', \/\/ \u6a21\u677f\u4e2d\u4f7f\u7528\u7684\u7ba1\u9053\u540d\u79f0
\n pure: true \/\/ \u7eaf\u7ba1\u9053：\u4ec5\u5f53\u8f93\u5165\u503c\/\u53c2\u6570\u53d8\u5316\u65f6\u89e6\u53d1，\u6027\u80fd\u66f4\u4f18
\n})
\nexport class OrderStatusPipe implements PipeTransform {
\n \/\/ \u72b6\u6001\u6620\u5c04\u8868：\u96c6\u4e2d\u7ba1\u7406，\u4fbf\u4e8e\u7ef4\u62a4
\n private statusMap: Record<number, OrderStatusMap> = {
\n 0: { label: '\u5f85\u652f\u4ed8', class: 'text-warning' },
\n 1: { label: '\u5df2\u652f\u4ed8', class: 'text-success' },
\n 2: { label: '\u5df2\u53d6\u6d88', class: 'text-danger' },
\n 3: { label: '\u9000\u6b3e\u4e2d', class: 'text-info' },
\n 4: { label: '\u5df2\u9000\u6b3e', class: 'text-gray' }
\n };<\/p>\n
\/**
\n * \u8f6c\u6362\u8ba2\u5355\u72b6\u6001
\n * @param value \u72b6\u6001\u7801（\u5fc5\u586b）
\n * @param type \u8fd4\u56de\u7c7b\u578b：'label'（\u9ed8\u8ba4）| 'class' | 'all'
\n * @returns \u683c\u5f0f\u5316\u7ed3\u679c
\n *\/
\n transform(value: number, type: 'label' | 'class' | 'all' = 'label'): string | OrderStatusMap {
\n \/\/ \u8fb9\u754c\u5904\u7406：\u7a7a\u503c\/\u65e0\u6548\u72b6\u6001\u7801
\n if (value === null || value === undefined || !this.statusMap[value]) {
\n return type === 'all' ? { label: '\u672a\u77e5\u72b6\u6001', class: 'text-default' } : '\u672a\u77e5\u72b6\u6001';
\n }<\/p>\n
const result = this.statusMap[value];
\n return type === 'all' ? result : result[type];
\n }
\n}<\/p>\n
\u6a21\u677f\u4e2d\u4f7f\u7528：<\/p>\n
<!– 1. \u4ec5\u663e\u793a\u72b6\u6001\u6587\u672c –>
\n<span>{{ order.status | orderStatus }}<\/span><\/p>\n
<!– 2. \u4ec5\u83b7\u53d6\u6837\u5f0f\u7c7b –>
\n<span [ngClass]="order.status | orderStatus: 'class'">{{ order.status | orderStatus }}<\/span><\/p>\n
<!– 3. \u83b7\u53d6\u5b8c\u6574\u4fe1\u606f（\u7ed3\u5408ng-template） –>
\n<ng-container *ngIf="order.status | orderStatus: 'all' as status">
\n <span [ngClass]="status.class">{{ status.label }}<\/span>
\n<\/ng-container><\/p>\n
\u4e1a\u52a1\u9700\u6c42：\u6839\u636e\u5546\u54c1\u5217\u8868\u8ba1\u7b97\u8d2d\u7269\u8f66\u603b\u91d1\u989d（\u542b\u6298\u6263\u3001\u6ee1\u51cf），\u4e14\u9700\u5b9e\u65f6\u54cd\u5e94\u6570\u636e\u53d8\u5316（\u5982\u5546\u54c1\u6570\u91cf\u4fee\u6539\u3001\u6298\u6263\u5238\u5207\u6362）\u3002<\/p>\n
\u6ce8\u610f：\u7eaf\u7ba1\u9053（pure: true）\u4ec5\u5728\u8f93\u5165\u503c\u5f15\u7528\u53d8\u5316\u65f6\u89e6\u53d1，\u82e5\u8f93\u5165\u662f\u6570\u7ec4 \/ \u5bf9\u8c61（\u5982\u8d2d\u7269\u8f66\u5217\u8868），\u4fee\u6539\u5185\u90e8\u5143\u7d20（\u5982cartItems[0].count++）\u4e0d\u4f1a\u89e6\u53d1\u91cd\u65b0\u8ba1\u7b97，\u6b64\u65f6\u9700\u4f7f\u7528\u975e\u7eaf\u7ba1\u9053（pure: false）\u3002<\/p>\n
\/\/ src\/app\/pipes\/cart-total\/cart-total.pipe.ts
\nimport { Pipe, PipeTransform } from '@angular\/core';<\/p>\n
\/\/ \u5546\u54c1\u7c7b\u578b\u5b9a\u4e49
\ninterface CartItem {
\n price: number; \/\/ \u5355\u4ef7（\u5206）
\n count: number; \/\/ \u6570\u91cf
\n discount: number; \/\/ \u5355\u54c1\u6298\u6263（0-1，\u59820.8=8\u6298）
\n}<\/p>\n
\/\/ \u6298\u6263\u5238\u7c7b\u578b
\ninterface Coupon {
\n type: 'fullReduce' | 'rate'; \/\/ \u6ee1\u51cf\/\u6298\u6263
\n value: number; \/\/ \u6ee1\u51cf\u91d1\u989d（\u5206）\/\u6298\u6263\u7387（0-1）
\n threshold: number; \/\/ \u6ee1\u51cf\u95e8\u69db（\u5206）
\n}<\/p>\n
@Pipe({
\n name: 'cartTotal',
\n pure: false \/\/ \u975e\u7eaf\u7ba1\u9053：\u6bcf\u6b21\u53d8\u66f4\u68c0\u6d4b\u90fd\u4f1a\u89e6\u53d1，\u6ce8\u610f\u6027\u80fd
\n})
\nexport class CartTotalPipe implements PipeTransform {
\n \/**
\n * \u8ba1\u7b97\u8d2d\u7269\u8f66\u603b\u91d1\u989d
\n * @param cartItems \u5546\u54c1\u5217\u8868
\n * @param coupon \u6298\u6263\u5238（\u53ef\u9009）
\n * @returns \u6700\u7ec8\u91d1\u989d（\u5143，\u4fdd\u75592\u4f4d\u5c0f\u6570）
\n *\/
\n transform(cartItems: CartItem[], coupon?: Coupon): number {
\n \/\/ \u8fb9\u754c\u5904\u7406：\u7a7a\u5217\u8868
\n if (!cartItems || cartItems.length === 0) {
\n return 0;
\n }<\/p>\n
\/\/ 1. \u8ba1\u7b97\u5546\u54c1\u5c0f\u8ba1（\u5355\u54c1\u5355\u4ef7*\u6570\u91cf*\u6298\u6263）
\n let subtotal = cartItems.reduce((sum, item) => {
\n const itemTotal = item.price * item.count * item.discount;
\n return sum + itemTotal;
\n }, 0);<\/p>\n
\/\/ 2. \u5e94\u7528\u6298\u6263\u5238
\n if (coupon) {
\n switch (coupon.type) {
\n case 'fullReduce':
\n \/\/ \u6ee1\u51cf：\u8fbe\u5230\u95e8\u69db\u624d\u751f\u6548
\n subtotal = subtotal >= coupon.threshold ? subtotal – coupon.value : subtotal;
\n break;
\n case 'rate':
\n \/\/ \u6298\u6263：\u76f4\u63a5\u4e58\u4ee5\u6298\u6263\u7387
\n subtotal = subtotal * coupon.value;
\n break;
\n }
\n }<\/p>\n
\/\/ 3. \u8f6c\u6362\u4e3a\u5143\u5e76\u4fdd\u75592\u4f4d\u5c0f\u6570（\u907f\u514d\u6d6e\u70b9\u7cbe\u5ea6\u95ee\u9898）
\n const total = Math.round(subtotal) \/ 100;
\n return Number(total.toFixed(2));
\n }
\n}<\/p>\n
\u6a21\u677f\u4e2d\u4f7f\u7528：<\/p>\n
<!– \u663e\u793a\u8d2d\u7269\u8f66\u603b\u91d1\u989d –>
\n<div class="total-price">
\n \u5408\u8ba1：\u00a5{{ cartItems | cartTotal: selectedCoupon }}
\n<\/div><\/p>\n
<!– \u5546\u54c1\u6570\u91cf\u4fee\u6539\u540e，\u7ba1\u9053\u81ea\u52a8\u91cd\u65b0\u8ba1\u7b97 –>
\n<div *ngFor="let item of cartItems">
\n <button (click)="item.count–">-<\/button>
\n <span>{{ item.count }}<\/span>
\n <button (click)="item.count++">+<\/button>
\n<\/div><\/p>\n
\u6027\u80fd\u63d0\u793a：\u975e\u7eaf\u7ba1\u9053\u4f1a\u9891\u7e41\u89e6\u53d1，\u5efa\u8bae：<\/p>\n
\u4e1a\u52a1\u9700\u6c42：\u6839\u636e\u7528\u6237 ID \u5f02\u6b65\u83b7\u53d6\u7528\u6237\u540d，\u5e76\u5728\u6a21\u677f\u4e2d\u76f4\u63a5\u683c\u5f0f\u5316\u663e\u793a\u3002<\/p>\n
\/\/ src\/app\/pipes\/async-username\/async-username.pipe.ts
\nimport { Pipe, PipeTransform } from '@angular\/core';
\nimport { Observable, of } from 'rxjs';
\nimport { catchError, map } from 'rxjs\/operators';
\nimport { UserService } from '..\/services\/user.service';<\/p>\n
@Pipe({
\n name: 'asyncUsername'
\n})
\nexport class AsyncUsernamePipe implements PipeTransform {
\n constructor(private userService: UserService) {}<\/p>\n
\/**
\n * \u5f02\u6b65\u83b7\u53d6\u7528\u6237\u540d
\n * @param userId \u7528\u6237ID
\n * @returns \u7528\u6237\u540dObservable
\n *\/
\n transform(userId: string | number): Observable<string> {
\n if (!userId) {
\n return of('\u672a\u77e5\u7528\u6237');
\n }<\/p>\n
return this.userService.getUserNameById(userId).pipe(
\n map(name => name || '\u533f\u540d\u7528\u6237'),
\n catchError(() => of('\u83b7\u53d6\u5931\u8d25'))
\n );
\n }
\n}<\/p>\n
\u6a21\u677f\u4e2d\u4f7f\u7528（\u7ed3\u5408async\u7ba1\u9053）：<\/p>\n
<!– \u6ce8\u610f：async\u7ba1\u9053\u9700\u653e\u5728\u6700\u540e，\u4e14\u907f\u514d\u91cd\u590d\u8c03\u7528（\u53ef\u4f7f\u7528as\u8bed\u6cd5\u7f13\u5b58） –>
\n<ng-container *ngIf="order.userId | asyncUsername | async as username">
\n <span>\u4e0b\u5355\u4eba：{{ username }}<\/span>
\n<\/ng-container><\/p>\n
\u81ea\u5b9a\u4e49\u7ba1\u9053\u7684\u6d4b\u8bd5\u805a\u7126transform\u65b9\u6cd5，\u4ee5\u8ba2\u5355\u72b6\u6001\u7ba1\u9053\u4e3a\u4f8b：<\/p>\n
\/\/ src\/app\/pipes\/order-status\/order-status.pipe.spec.ts
\nimport { OrderStatusPipe } from '.\/order-status.pipe';<\/p>\n
describe('OrderStatusPipe', () => {
\n let pipe: OrderStatusPipe;<\/p>\n
beforeEach(() => {
\n pipe = new OrderStatusPipe();
\n });<\/p>\n
it('\u8f6c\u6362\u6709\u6548\u72b6\u6001\u7801\u4e3a\u6807\u7b7e', () => {
\n expect(pipe.transform(0)).toBe('\u5f85\u652f\u4ed8');
\n expect(pipe.transform(1)).toBe('\u5df2\u652f\u4ed8');
\n });<\/p>\n
it('\u8f6c\u6362\u6709\u6548\u72b6\u6001\u7801\u4e3a\u6837\u5f0f\u7c7b', () => {
\n expect(pipe.transform(2, 'class')).toBe('text-danger');
\n });<\/p>\n
it('\u5904\u7406\u65e0\u6548\u72b6\u6001\u7801', () => {
\n expect(pipe.transform(999)).toBe('\u672a\u77e5\u72b6\u6001');
\n expect(pipe.transform(null, 'all')).toEqual({ label: '\u672a\u77e5\u72b6\u6001', class: 'text-default' });
\n });
\n});<\/p>\n
\u81ea\u5b9a\u4e49\u7ba1\u9053\u662f Angular \u4e2d\u5c01\u88c5\u6570\u636e\u683c\u5f0f\u5316\u903b\u8f91\u7684\u6700\u4f73\u65b9\u5f0f，\u6838\u5fc3\u8981\u70b9\u5982\u4e0b：<\/p>\n
\u5408\u7406\u4f7f\u7528\u81ea\u5b9a\u4e49\u7ba1\u9053，\u80fd\u8ba9\u4f60\u7684 Angular \u4ee3\u7801\u66f4\u7b80\u6d01\u3001\u66f4\u6613\u7ef4\u62a4，\u5c24\u5176\u5728\u4e2d\u5927\u578b\u9879\u76ee\u4e2d，\u7ba1\u9053\u7684\u590d\u7528\u4f18\u52bf\u4f1a\u66f4\u52a0\u660e\u663e\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5728 Angular \u5f00\u53d1\u4e2d，\u7ba1\u9053（Pipe）\u662f\u5904\u7406\u6570\u636e\u683c\u5f0f\u5316\u7684\u6838\u5fc3\u5de5\u5177，Angular \u5185\u7f6e\u7684date\u3001uppercase\u3001currency\u7b49\u7ba1\u9053\u80fd\u6ee1\u8db3\u57fa\u7840\u9700\u6c42，\u4f46\u9762\u5bf9\u590d\u6742\u7684\u4e1a\u52a1\u573a\u666f（\u5982\u591a\u7ef4\u5ea6\u6570\u636e\u8f6c\u6362\u3001\u72b6\u6001\u6620\u5c04\u3001\u4e2a\u6027\u5316\u683c\u5f0f\u5316），\u81ea\u5b9a\u4e49\u7ba1\u9053\u6210\u4e3a\u63d0\u5347\u4ee3\u7801\u590d\u7528\u6027\u548c\u53ef\u7ef4\u62a4\u6027\u7684\u5173\u952e\u3002\u672c\u6587\u5c06\u4ece\u5b9e\u9645\u4e1a\u52a1\u573a\u666f\u51fa\u53d1，\u8be6\u89e3\u5982\u4f55\u901a\u8fc7\u81ea\u5b9a\u4e49\u7ba1\u9053\u5c01\u88c5\u590d\u6742\u903b\u8f91，\u8ba9\u6a21<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[5120,187,87],"topic":[],"class_list":["post-61507","post","type-post","status-publish","format-standard","hentry","category-server","tag-angular-js","tag-javascript","tag-87"],"yoast_head":"\n