iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 22
1

透過Pipe,可以不用在Component端寫程式改變資料的顯示模式,而是透過 Pipe 的模式來調整要顯示的資料內容,如此一來我們就不用在 Component中花太多心思去關注內容該如何呈現,再次達到關注點分離的效果

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  // uppercase 為 Angular 內建
  template: '<p>My name is <strong>{{ name | uppercase }}</strong>.</p>',
})
export class AppComponent {
  name = 'john doe';
}

客製通道

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

@Pipe({
  name: 'exponential'
})
export class ExponentialPipe implements PipeTransform {

  transform(value: number, exponent: string): number {
    let exp = parseFloat(exponent);
    return Math.pow(value, isNaN(exp) ? 1 : exp);
  }
}
  • transform function 所回傳的值,會用來顯示在畫面上
  • 第一個參數 value 是所要轉換的資料來源
  • 第二個之後的參數可以用來接 Template 傳給 pipe 的參數值

參考

  1. [Angular2速成班]使用Pipe輕鬆改變view上的顯示內容(1)-Angular2內建Pipe
  2. [Angular] Pipe
  3. [Day 07] Angular 2 PIPES(通道)

上一篇
[Day 20] Angular 使用 React Form
下一篇
[Day 22] 什麼是ngrx
系列文
Angular 8 從推坑到放棄30

尚未有邦友留言

立即登入留言