Angular Pipe的应用

Angular管道使用详解

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tomboyxiao/p/8397470.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何在Angular项目中使用自定义管道，包括在HTML模板和TypeScript文件中的具体应用方式，并提供了依赖注入的配置示例。

1-在html文件中使用管道；（管道符合使用，用‘：’号隔开）

①页面中添加；

 <div class="table_content" *ngFor="let item of result">
        <div class="col1">{{item.DESC}}</div>
        <div class="col2" *ngIf="item.DATA">{{item.DATA}}</div>
        <div class="col3" *ngIf="item.ZB">{{item.ZB | decimal2:'%'}}</div>
    </div>

②完成依赖注入；

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ReportCheckResultPage } from './report-check-result';
import { PipesModule } from '../../../../pipes/pipes.module';

@NgModule({
  declarations: [
    ReportCheckResultPage,
  ],
  imports: [
    PipesModule,
    IonicPageModule.forChild(ReportCheckResultPage),
  ],
  exports: [
    ReportCheckResultPage
  ],
})
export class ReportCheckResultPageModule {}

pipes.module.ts

import { NgModule } from '@angular/core';
import { Decimal2Pipe } from './decimal2/decimal2';
@NgModule({
    declarations: [Decimal2Pipe,],
    imports: [],
    exports: [Decimal2Pipe,]
})
export class PipesModule {}

2-在.ts文件中使用管道；

①导入相应文件；

import { ChinesePipe } from '../../../../pipes/chinese/chinese';//导入相应管道文件；
@IonicPage({
  name: 'reportCheck',
  segment: 'reportCheck'
})
@Component({
  selector: 'page-report-check',
  templateUrl: 'report-check.html',
})
export class ReportCheckPage {
constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public cp: ChinesePipe,
  ) {}

formatFun(){
return this.cp.transform(key,res[key]);
}

②完成依赖注入；

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ReportCheckPage } from './report-check';
import { ChinesePipe } from '../../../../pipes/chinese/chinese';

@NgModule({
  declarations: [
    ReportCheckPage,
  ],
  imports: [
    IonicPageModule.forChild(ReportCheckPage),
  ],
  exports: [
    ReportCheckPage
  ],
  providers:[ChinesePipe]
})
export class ReportCheckPageModule {}

转载于:https://www.cnblogs.com/tomboyxiao/p/8397470.html