Angular 2 căn bản - Bài 14: Cách tạo và sử dụng Pipes

bởi Bạch Ngọc Toàn vào 23/01/2017 thuộc Lập trình Angular 2 căn bản . Lượt xem: 6,370

Bài học này chúng ta sẽ học cách sử dụng các Pipe có sẵn trong Angular 2 để định dạng và chuyển đổi dữ liệu hiển thị, đồng thời học cách tạo mới các custom pipe theo nhu cầu nghiệp vụ riêng.

Bước 1. Tạo pipe

import { Pipe, PipeTransform } from '@angular/core';

/*
 * Raise the value exponentially
 * Takes an exponent argument that defaults to 1.
 * Usage:
 *   value | exponentialStrength:exponent
 * Example:
 *   {{ 2 |  exponentialStrength:10}}
 *   formats to: 1024
*/
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent: string): number {
    let exp = parseFloat(exponent);
    return Math.pow(value, isNaN(exp) ? 1 : exp);
  }
}

Bước 2. Nhúng Pipe vào app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import {TutorialComponent} from './tutorial.component';
import {FormsModule} from '@angular/forms'
import {ExponentialStrengthPipe} from './exponential-strength.pipe';
@NgModule({
  imports:      [ BrowserModule,FormsModule ],
  declarations: [ AppComponent,TutorialComponent,ExponentialStrengthPipe],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Bước 3: Sử dụng Pipe

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
  <h1>{{title | uppercase}}!</h1>
  <p>Date today: {{today | date:'shortDate' | uppercase}}</p>
  <p>Percent: {{percentNumber | percent}}</p>
  <p>e (3.1-5): {{e | number}}</p>
  <pre>{{object | json}}</pre>
  <p>2 power 10: {{ 2 |  exponentialStrength:2}}</p>
  <ul>
    <li *ngFor="let i of collection | slice:1:3">{{i}}</li>
  </ul>
  <my-tutorial></my-tutorial>
  `,
})
export class AppComponent {
  public title = "Hello TEDU Channel"
  public today = Date.now();
  public percentNumber = 1.3495;
  public  e: number = 2.718281828459045;
   public object: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}};

   public collection: string[] = ['a', 'b', 'c', 'd'];
}

Chi tiết xem tại video: