管道用来对字符串、货币金额、日期和其他显示数据进行转换和格式化。管道是一些简单的函数，可以在模板表达式中用来接受输入值并返回一个转换后的值。例如，你可以使用一个管道把日期显示为 1988 年 4 月 15 日，而不是其原始字符串格式。

管道 API 文档

KeyValuePipe

我用到最多的是KeyValuePipe 将 Object 或 Map 转换为键值对数组。

1
2
3
4

<!-- data = { name: 'foo', age: 12 }; -->
<div *ngFor="let item of data | keyvalue">
  <h5>{{ item.key }}:{{ item.value }}</h5>
</div>

keyvalue 输入数组将通过键名排序，如以上的示例的输出顺序是 age:12 　name:foo
关于如何设置 keyvalue 的输出顺序按照属性原本的顺序，stack overflow 上有一个提问angular-keyvalue-pipe-sort-properties-iterate-in-order

自定义管道

对于 log 记录文本‘将姓名由张三变更李四’，现下想要将文本处理成‘将姓名由 张三 变更 李四’的样式。于是可以通过 Angular 自定义管道处理。

1

ng g pipe log --module=core

1
2
3
4
5
6
7
8
9
10
11
12

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

@Pipe({
  name: 'logPipe',
})
export class LogPipe implements PipeTransform {
  transform(value: string): any {
    value = value.replace('由', '由 ');
    value = value.replace('变更', ' 变更 ');
    return value;
  }
}

以上生成了 logPipe 的管道，并将指定了该管道所属的模块，因为 core 是一个共享模块，所以，需要同时在模块里导出管道。

1
2
3
4
5
6
7
8
9
10

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LogPipe } from './pipe/log.pipe';

@NgModule({
  declarations: [LogPipe],
  imports: [CommonModule],
  exports: [LogPipe],
})
export class CoreModule {}

1
2
3
4
5

<nz-timeline-item
      nzPosition="left"
      *ngFor="let detail of log.f_exit_details">
  {{ detail | logPipe }}
</nz-timeline-item>

Angular 以 html 格式插值

1
2

<p>{{htmlSnippet}}</p>
<p [innerHTML]="htmlSnippet"></p>

插值的内容总会被编码 - 其中的 HTML 不会被解释，所以浏览器会在元素的文本内容中显示尖括号。
如果希望这段 HTML 被正常解释，就必须绑定到一个 HTML 属性上，比如 innerHTML。如果插值包含<script>标签，Angular 认为这些值是不安全的，并自动进行无害化处理，它会移除 <script> 标签，但保留安全的内容及标签。