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>