Angular8的使用(四)：管道和定时器

1.管道

1.1.默认管道

默认管道：DatePipe(时间)、UpperCasePipe(大写)、LowerCasePipe(小写)、CurrencyPipe(货币)、PercentPipe(百分比)
如DatePipe：

<p>{{myDate | date: "yyyy-MM-d"}}</p>

说明：date后面的是参数，可以接多个参数，使用英文冒号分割；其他管道同样雷同；

其他管道示例如下：

//转为大写
<p>{{title | uppercase}}</p>
//转为小写
<p>{{title | lowercase}}</p>
//货币
<p>{{title | currency}}</p>//默认为$，如20---->$20
<p>{{title | currency: '￥'}}</p>//20---->￥20
//百分比
<p>{{number | percent}}</p>  //默认小数点后，保留2位。
<p>{{number | percent: '4.5-8'}}</p> //4.5-8：转为百分号后，小数点前保留4位数，小数点后保留5至8位。

说明：管道可以同时使用多个，链式管道。

<p>{{title | uppercase} | currency}</p>

1.2.自定义管道

1.2.1.创建自定义管道

在需要创建管道的目录下输入以下命令

ng generate pipe test-pipe --no-spec //生成一个不带spec.ts的管道

管道内容

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

@Pipe({
  name: 'test'
})
export class TestPipe implements PipeTransform {
  transform(baseNum: number, indexNum: string): number {
    const exp = parseFloat(indexNum);
    return Math.pow(baseNum, isNaN(exp) ? 1 : exp);
  }
}

说明：transform的第一个参数为符号‘|’前的参数，如果在‘|’后有多个参数，则继续在transform方法后面添加参数即可。@Pipe的参数name为管道的名称。

1.2.2.自定义管道的使用

html

<div><p class="show-pipe">{{baseNum | test: indexNum}}</p></div>

ts

export class ModeComponent implements OnInit {
  baseNum = 2;
  indexNum = '10';
  constructor() { }
  ngOnInit() {
  }
}

1.3.自定义管道传多个参数

html

<div><p class="show-pipe">{{ value | test: param1: param2}}</p></div>

多个参数，使用:进行隔开。
ts

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

@Pipe({
  name: 'test'
})
export class TestPipe implements PipeTransform {
  transform(value: number, param1: string,  param2: string): number {
    return value+param1+param2;
  }
}

第一个参数为value，后面的param依次为:后面的param。

1.4.管道中调用其他管道和服务

说明*：通过结构constructor的方式引入其他管道和服务。
html

<div><p class="show-pipe">{{ value | test: param1}}</p></div>

ts

import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Pipe({
  name: 'test'
})
export class TestPipe implements PipeTransform {
  constructor(public translate: TranslateService,//调用其他服务
  	private test: testPipe) {//调用其他管道
  }
  transform(value: number, param1: string): number {
    new 
    return value+param1;
  }
}

2.定时器

import {ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges, OnDestroy} from '@angular/core';

export class ModeOneComponent implements OnInit, OnChanges, OnDestroy {
timer;
oneHeight  = '';
windowHeightRightPre = $(window).height() * 0.5;
constructor(private service: AppServicef,
              private ref: ChangeDetectorRef) {
    /**
     * 定时器，每0.1s启动一次，用于监听window的height是否发生变化
     */
    this.timer = setInterval(() => {
      const currentWindowHeight = $(window).height();
      if (currentWindowHeight !== this.windowHeightRightPre) {
        this.oneHeight = currentWindowHeight * 0.5 + 'px';
      }
      this.ref.detectChanges();
    }, 100);
  }
	ngOnDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
}