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);
}
}
}