如何自定义管道

[deepthan]

如何自定义管道

1. 先写一个简单的管道

新建一个获得顺序的管道，传入1显示第一个字段，传入2显示第二个字段

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

@Pipe({
  name: 'getOrder'
})
export class ColorLumpPipe implements PipeTransform {
  transform(value: number): any {
    switch(value){
      case 1: return  '第一个'; 
      case 2: return  '第二个'; 
      default: break;
    }
  }
}

在HTML中这样使用：

{{ 1 | getOrder }}

则会渲染成

第一个

2. 再往管道中传入参数

如果我想在管道转换的时候传入一些参数，则可以这样做：

html

{{ 2 | getOrder:'我是传递到管道中的参数' }}

pipe

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

@Pipe({
  name: 'getOrder'
})
export class ColorLumpPipe implements PipeTransform {
  transform(value: number, args: string): any {
    switch(value){
      case 1: return  '第一个'; 
      case 2: return  '第二个' + args; 
      default: break;
    }
  }
}

则这时候会渲染成

第二个我是传递到管道中的参数

3. 一个管道返回html如何渲染？

我们编写一个管道，传入一个颜色，它会返回这个颜色的名称并且字体为传入的颜色。

pipe

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

@Pipe({
  name: 'color'
})
export class StatusPipe implements PipeTransform {

  transform(value:string): any {
    return `<div style="color: ${value}">${value}<div>`;
  }
}

html中使用

{{ 'red' | color }}

渲染成

<div style="color: red">red<div>

它不会被当做html解析，展现出来的是如上的字符串。

为什么？因为angular做了安全处理，对于用户输出的html默认不解析。

所以我们需要再写一个管道把字符串的html转成能够解析的html。

import { Pipe, PipeTransform } from "@angular/core";
import {
  DomSanitizer,
  SafeHtml,
  SafeStyle,
  SafeScript,
  SafeUrl,
  SafeResourceUrl
} from "@angular/platform-browser";

@Pipe({
  name: "safe"
})
export class SafePipe implements PipeTransform {
  constructor(protected sanitizer: DomSanitizer) {}

  public transform(
    value: any,
    type: string
  ): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case "html":
        return this.sanitizer.bypassSecurityTrustHtml(value);
      case "style":
        return this.sanitizer.bypassSecurityTrustStyle(value);
      case "script":
        return this.sanitizer.bypassSecurityTrustScript(value);
      case "url":
        return this.sanitizer.bypassSecurityTrustUrl(value);
      case "resourceUrl":
        return this.sanitizer.bypassSecurityTrustResourceUrl(value);
      default:
        throw new Error(`Invalid safe type specified: ${type}`);
    }
  }
}

如果想渲染html，管道的用法和之前的不同，angular管道还可以连着写，

<span [outerHTML]="'red' | color  | safe: 'html'"></span>

那么就会渲染成红色字段红色字体

红色