angular预置的管道

发表于

angular本身已经给我们预置了一写实用的管道

I18nPluralPipe

解析出map对应的字符串

一只🌰:

1
2
3
4
5
6
7
8
9
@Component({
  selector: 'i18n-plural-pipe',
  template: `<div>{{ messages.length | i18nPlural: messageMapping }}</div>`
})
export class I18nPluralPipeComponent {
  messages: any[] = ['Message 1'];
  messageMapping:
      {[k: string]: string} = {'=0': 'No messages.', '=1': 'One message.', 'other': '# messages.'};
}

I18nSelectPipe

映射是一个对象，用于指示为所提供的表达式的不同值显示的文本。 如果映射关键字都不匹配表达式的值，则返回other关键字的内容，否则返回空字符串。

1
2
3
4
5
6
@Component(
    {selector: 'i18n-select-pipe', template: `<div>{{gender | i18nSelect: inviteMap}} </div>`})
export class I18nSelectPipeComponent {
  gender: string = 'male';
  inviteMap: any = {'male': 'Invite him.', 'female': 'Invite her.', 'other': 'Invite them.'};
}

LowerCasePipe

转为小写字母

1
<p>In lowercase: <pre>'{{value | lowercase}}'</pre></跑>

UpperCasePipe

转为大写字母, 用法 value | uppercase

PercentPipe

转换为百分制

1
<p>A: {{a | percent}}</p>

AsyncPipe

async pipe订阅一个observable或一个promise, 返回最后一个发送的值, 并订阅值的改变. 当使用它的组件销毁时, 自动取消订阅

1
<p>A: {{a | async}}</p>

SlicePipe

截取字符串, 用法 str | slice:start[:end]

DatePipe

输出指定格式的时间, 用法date | date[:format[:timezone[:locale]]]

JsonPipe

装换为json字符串输出, 用法object | json

Angular 提供了一些内建的 validators，我们可以在 Template-Driven 或 Reactive 表单中使用它们。

目前 Angular 支持的内建 validators 如下：

  • required - 设置表单控件值是非空的。
  • email - 设置表单控件值的格式是 email。
  • minlength - 设置表单控件值的最小长度。
  • maxlength - 设置表单控件值的最大长度。
  • pattern - 设置表单控件的值需匹配 pattern 对应的模式。