ionci2开发之通道

1 介绍

本文是《健康档案》项目结束后的总结,主要描述该项目中用到的一些通道和可以优化的地方。

1.1 配置(app.module.ts)

所有新增的通道都需要在declarations中配置:
declarations: [
    MyApp,
    HomePage,
    
    ImagePipe,
    DatePipe,
    TextareaPipe,
    TimePipe,
    UnitPipe,
    YesOrNoPipe,
  ]

2 通道

2.1 图片通道

定义:
import { Injectable, Pipe } from '@angular/core';

@Pipe({
  name: 'imagePipe'
})
@Injectable()
export class ImagePipe {
  transform(value, args):string {
    let img = value.img;
    let sexCode = value.sexCode;
    let name = value.name;
    if((img == '' || img == null) && (name != '' && name !=null)){
      if(sexCode == '1' || sexCode == '男'){
        img = 'assets/images/defaultMan.png';
      }
      else if(sexCode =='2' || sexCode == '女'){
        img = 'assets/images/defaultWoman.png';
      }
      else{
        img = 'assets/images/defaultPerson.png';
      }
    }
    img = img + '?' + Math.random();
    return img;
  }
}
使用:
<img src="{{{img:item.AttachURL,sexCode:item.SexCode,name:item.Name}|imagePipe}}">

2.2 日期通道

定义(该写法可以优化,具体参考时间通道):
import { Injectable, Pipe } from '@angular/core';

@Pipe({
  name: 'datePipe'
})
@Injectable()
export class DatePipe {
  transform(value, args):string {
    let reValue = "";
    if(value != null && value != ""){
      reValue = value.substring(0,10);
    }
    return reValue;
  }
}
使用:
<span class="date">{{item.AcceptDate | datePipe}}</span>

2.3 时间通道

定义:
import { Injectable, Pipe } from '@angular/core';

@Pipe({
  name: 'timePipe'
})
@Injectable()
export class TimePipe {
  transform(value, args):string {
    let reValue = '';
    if(value != null && value != ''){
      let newValue = new Date(value).getTime() - 8*60*60*1000;
      let newDate = new Date();
      newDate.setTime(newValue);

      reValue = newDate.getFullYear() + '-'
        + this.dealMun(newDate.getMonth() + 1) + '-'
        + this.dealMun(newDate.getDate()) + ' '
        + this.dealMun(newDate.getHours()) + ':'
        + this.dealMun(newDate.getMinutes());
    }
    return reValue;
  }

  dealMun(m){
    return m>9?m.toString():'0'+m;;
  }
}
使用:
<span>{{detail.DefUpdateTime|timePipe}}</span>

2.4 单位通道

定义:
import { Injectable, Pipe } from '@angular/core';

@Pipe({
  name: 'unitPipe'
})
@Injectable()
export class UnitPipe {
  transform(value, args) {
    let myValue = value.value; 
    let myUnit = value.unit;
    let reText = "";

    if(myValue != null && myValue !='' && typeof(myValue) != 'undefined'){
      reText = myValue + myUnit;
    }

    return reText;
  }
}
使用:
{{{value:detail.Triglyceride,unit:'mmol/L'}|unitPipe}}

2.5 多行文本

定义:
import { Injectable, Pipe } from '@angular/core';

@Pipe({
  name: 'textareaPipe'
})
@Injectable()
export class TextareaPipe {
  transform(value, args) {
    if(typeof(value) == 'undefined' || value == null){
      return "";
    }
    return value.replace(/\n/g, '_@').replace(/\r/g, '_#')
      .replace(/_@/g, '<br/>').replace(/\s/g, ' ');
  }
}
使用:
<div class="consult-dialog" [innerHTML]="detail.Content|textareaPipe"></div>
优化(原因:“_#”多余):
value.replace(/\r\n|\n\r|\r|\n/g, '_@')
      .replace(/_@/g, '<br/>').replace(/\s/g, ' ');


2.6 是否通道

定义(根据后端数据编写逻辑):
import { Injectable, Pipe } from '@angular/core';


@Pipe({
  name: 'yesOrNoPipe'
})
@Injectable()
export class YesOrNoPipe {
  transform(value, args) {
    if(value == '1'){
      value = '是'
    }
    else{
      value = '否'
    }
    return value.toLowerCase();
  }
}
使用:
{{detail.IsDrinkingInYear|yesOrNoPipe}}

3 优化

3.1 添加富文本通道

将如下方法转换为通道:
import { DomSanitizer } from '@angular/platform-browser/src/security/dom_sanitization_service';//富文本
innerElectrocardiogram(){
    return this.sanitizer.bypassSecurityTrustHtml(this.detail.Electrocardiogram);
}

使用:
<ion-col width-100 class="value left" [innerHTML]="detail.OtherSituations|textareaPipe"></ion-col>





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值