AngularJSangular2-管道

管道:

管道将多少作输入,然后换它,给起想之出口。
我们用把组件的birthday性能转换成对全人类还融洽的日期格式,来证明及时或多或少

<p>The hero’s birthday is {{
birthday | date }}</p>

插值表达式中,我们于组件的birthday值通过管道操作符(
| )流动到
右侧的Date管道函数中。所有管道还见面因此这种艺术行事。

 

内置管道:

Angular内置了有些管道,比如DatePipeUpperCasePipeLowerCasePipeCurrencyPipePercentPipe
它们均可以直接用在其他模板被。

假如学又多坐管道的文化,参见API参考手册,并因此“pipe”为重要词对结果开展过滤。

 

对管道进行参数化

管道可能接受外数之可选参数来对她的输出进行微调。
我们得当管道名后面加加一个冒号( :
)再和一个参数值,来啊管道添加参数(比如currency:'EUR')。
如果我们的管道可以领多单参数,那么即使因此冒号来分隔这些参数值(比如slice:1:5)。

 

咱将经过修改生日模板来吃这日期管道提供一个格式化参数。
当格式化了该英雄的4月15日生日后,它应该受渲染成04/15/88。

<p>The hero’s birthday is {{
birthday | date:”MM/dd/yy” }} </p>

 

参数值可以是其他有效之模板表达式(参见模板语法中的模板表达式有),比如字符串字面量或机件的特性。
换句话说,借助性绑定,我们为得像用绑定来决定生日的值一样,控制生日的亮格式。

<p>The
hero’s birthday is {{ birthday | date:format
}}</p>

 

链式管道: {{ birthday | date | uppercase}}

 

自定义管道:

咱俩尚可描绘自己之自定义管道。
下面就是是一个称ExponentialStrengthPipe的管道,它可以放大英雄的能力:

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

@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent: string): number {
    let exp = parseFloat(exponent);
    return Math.pow(value, isNaN(exp) ? 1 : exp);
  }
}

  

以是管道的定义着体现了几个根本点:

    • 管道是一个富含“管道元数据(pipe metadata)”装饰器的切近。

    • 斯管道类实现了PipeTransform接口的transform术,该方法接受一个输入值和有些可选参数,并返转换后的价。

    • 当每个输入值为污染被transform艺术时,还会见带上别一个参数,比如我们以此管道遭之exponent(放大指数)。

    • 俺们通过@Pipe装饰器告诉Angular:这是一个管道。该装饰器是自从Angular的core库房中引入的。

    • 这个@Pipe装饰器允许我们定义管道的名,这个名字会让用当模板表达式中。它必须是一个中之JavaScript标识符。
      比如,我们是管道的名是exponentialStrength

 

PipeTransform接口

transform计是管道的基本要素。 PipeTransform接口中定义了其,并因此它们点各种工具及编译器。
理论及说,它是可选的。Angular不会见无她,而是一直搜索并施行transform方法。

 

假如留心的发生零星沾:

    • 咱们应用自定义管道的法以及放开管道完全相同。

    • 咱俩务必于AppModuledeclarations数组中蕴藏这个管道。

 

 

纯(pure)管道与非纯(impure)管道

发少像样管道:纯的和非纯的。
默认情况下,管道都是纯的。我们原先看到的每个管道都是纯粹的。
通过将它的pure标明设置也false,我们得以制作一个非纯管道。我们得以像这么受FlyingHeroesPipe变成非纯的

@Pipe({
  name: 'flyingHeroesImpure',
  pure: false
})  

纯管道:

Angular只有在她检测及输入值发生了纯变更常常才见面履纯管道。 纯变更凡依赖对原始类型值(StringNumberBooleanSymbol)的更动,
或者对目标引用(DateArrayFunctionObject)的更改。

Angular会忽略(复合)对象内部的转移。
如果我们转移了输入日期(Date)中的月、往一个输入数组(Array)中上加新值或者更新了一个输入对象(Object)的性能,Angular都无见面调用纯管道。

非纯管道:

Angular会在每个组件的改动检测周期中执非纯管道
非纯管道可能会见为调用很多不行,和每个按键或每次鼠标移动一样频繁。

苟以头脑里死着当时根弦,我们得小心的实现非纯管道。
一个高昂、迟钝的管道用摧毁用户体验。

 

我们把FlyingHeroesPipe换成了FlyingHeroesImpurePipe
下面是一体化的落实:

 

@Pipe({
  name: 'flyingHeroesImpure',
  pure: false
})
export class FlyingHeroesImpurePipe extends FlyingHeroesPipe {}

  我们把它由FlyingHeroesPipe屡遭继承下去,以说明无论需改变内部代码。
唯一的别是管道元数据中的pure标志。

 

非纯 AsyncPipe

Angular的AsyncPipe凡一个好玩之非纯管道的事例。 AsyncPipe接受一个PromiseObservable作为输入,并且自动订阅者输入,最终回她吃有底值。

AsyncPipe管道是有状态的。
该管道保护在一个所输入的Observable的订阅,并且不断从杀Observable饱受发出新到之价值。

 

没有FilterPipe或者OrderByPipe

 熟悉AngularJS之开发人员应该清楚filterorderBy过滤器,但在Angular中她从不等价物。

即并无是忽视。Angular不思量提供这些管道,因为 (a) 它们性能堪忧,以及 (b)
它们会阻拦比较激进的代码最小化(minification)。
无论是filter还是orderBy犹要它们的参数引用对象型属性。
我们前面学过,这样的管道必然是非纯管道,并且Angular会在几乎各个一样不好反检测周期被调用非纯管道

咱用文本字符串来号出打消序字段,期望管道通过索引形式(如hero['name'])引用性的值。
不幸的是,激进的代码最小化策略会改变Hero好像的属性名,所以Hero.nameHero.planet也许会见被成为Hero.aHero.b
显然,hero['name']凡无能为力正常办事之。

 

Angular开发组和局部产生经历的Angular开发者强烈建议你:把你的过滤与排序逻辑挪进组件本身。
组件可以对外暴露一个filteredHeroessortedHeroes属性,这样它就是抱控制权,以决定要为此什么频度去实践外帮扶逻辑。
你本来准备实现吗管道,并于全方位应用中共享的那些效果,都能够于改写为一个过滤/排序的劳动,并流入及零部件中。

 

一经您切莫欲担心这些性和极其小化问题,也得以创造好的管道来兑现这些成效(参考FlyingHeroesPipe丁之写法)或顶社区被去探寻找

 

 

 

 

相关文章