angular pipe 自定义管道

可以理解为angular中的管道(pipe)与angular1.x的过滤器(filter)一样。

那么我们就来自定义一个管道。
新建管道

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'dataUnit' })
export class DataUnitPipe implements PipeTransform {
  transform(value: string): string {
    if(!value) {
      throw new Error('格式错误');
    }
    return value + `个`;
  }
} 

在pipe.module中声明这个管道

import { NgModule } from '@angular/core';
import { DataUnitPipe } from './pipe/dataUnit.pipe'

 @NgModule({
     imports:        [],
     declarations:   [DataUnitPipe],
     exports:        [DataUnitPipe],
 })

 export class PipeModule {
   static forRoot() {
      return {
          ngModule: PipeModule,
          providers: [],
      };
   }
 } 

在app,module中引用pipe.module


app.module

在component中使用自定义好的pipe
html

<div>
    <div>
        <input type="text" #inputNum>
    </div>
    <div>
        <button (click)="onClick(inputNum.value)">点击显示结果</button>
    </div>
    <div>{{ myInput | dataUnit }}</div>
 </div>

ts

import { Component } from '@angular/core';
@Component({
selector: 'pipe-app',
templateUrl: './pipe.component.html',
})
export class PipeAppComponent {
  myInput = 0;
  onClick (value){
      this.myInput = value; 
  }
}

界面输出:


抛出错误
正常显示
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容