angular自定义管道【pipe】
<p>链接：https://juejin.im/post/58db5b55128fe1006cdf0bb3</p><p>angular中，管道的使用</p>
<p>管道一般适用于Mustache语法 的双向数据内， eg{{item |json}} 该例子采用了内置的JsonPipe管道。</p>
<p>若要带参数 则{{item |slice:0:4} 管道后面冒号跟随的就是参数</p>
<p>多重管道如何调用 {{item |slice:0:4|uppercase}}</p>
<p> </p>
<p>如何书写一个自定义管道</p>
<p>1 自定义管道必须依赖这2个</p>
<p> import { Pipe, PipeTransform } from '@angular/core';</p>
<p>2 // 管道装饰符 ，name就是管道名称</p>
<p> @Pipe ({name: 'name'})</p>
<p> </p>
<p>3 export class PipeNamePipe implements PipeTransform {</p>
<p> // value: 传入的值</p>
<p> // ... args: 参数集合(用了...拓展符),会把数组内的值依次作为参数传入 参数可改成常规的写法（value: any ,start: number, end: number）</p>
<p> transform(value: any, ...args:any[]) : any {}</p>
<p>}</p>
<p>例1 实现一个切割字符串然后拼接<code>...</code>的管道【用于渲染数据过长截取】</p>
<p>import { Pipe, PipeTransform } from '@angular/core';</p>
<p>@Pipe( {</p>
<p> name: 'SliceStr'</p>
<p> })</p>
<p>export class SliceStrPipe implements PipeTransform {</p>
<p> </p>
<div>
<div><span class="hljs-comment">/** * 截图字符串字符 * option(start,end,[+str]) */ <span class="hljs-comment">// start和end及extraStr后面都跟随了一个问好，代表这个为可选参数而不是必选的 <span class="hljs-comment">// 功能就是给出截图的启示，然后是否拼接你自定义的字符串(...)等</span></span></span></div>
transform(value: string, start?: number, end?: number, extraStr: string) :string {</div>
<div> if (value) {</div>
<div> if (typeof start === 'number' && typeof end === 'number') {</div>
<div> if (value.length > end && extraStr && typeof extraStr === 'string') {</div>
<div> return value.slice(start, end) + extraStr,toString();</div>
<div> } else {</div>
<div> return value.slice(start, end);</div>
<div> }</div>
<div> } else {</div>
<div> return value.slice(start, end)</div>
<div> }</div>
<div> } else {</div>
<div> return value;</div>
<div> }<br><br></div>
<p>}</p>
<p> </p>
<p>模仿angular中的 keyvalue管道：</p>
<p>import {Pipe, PipeTransform} from '@angular/core';</p>
<p>/*</p>
<p> Convert Object to array of keys.</p>
<p>*/</p>
<p>@Pipe({</p>
<p> name: 'appProperties'</p>
<p>})</p>
<p>export class PropertiesPipe implements PipeTransform {</p>
<p> transform(value: {}): string[] {</p>
<p> if (!value) {</p>
<p> return [];</p>
<p> }</p>
<p> return Object.keys(value);</p>
<p> }</p>
<p>}</p>
<p> </p>
<p>在模板中使用: <div *ngFor="let property of response |appProperies></p>
<p> <div *ngFor="let item of response"> {{item.dosomething}}</div></p>
<p> </div></p>
<p> </p>
<p>如何是一个自定义管道生效</p>
<p>// 功能管道 ， 单一引入生效</p>
<p>import { SliceStrPipe } from './SliceStr/slice-str.pipe';</p>
<p>@NgModule ( {</p>
<p> imports: ,'</p>
<p> declarations: , // 管道生效必须放到declarations里面</p>
<p>})</p>
<p>// 模块引入</p>
<p>写一组管道，放到自定义模块中，最后导出，然后在其他模块引入这个模块就能直接使用</p>
<p>import ..........</p>
<p><br>const pipe =[<br>IsCitizenIDPipe,<br>IsEmailPipe,<br>IsEnhancePasswordPipe,<br>IsFixedPhonePipe,<br>IsLicensePipe,<br>IsMobilePhonePipe,<br>IsNormalPasswordPipe,<br>IsNumberPipe,<br>IsUsernamePipe,<br>SliceStrPipe,<br>TimeDifferencePipe,<br>TransDatePipe,<br>ThousandSeparationPipe<br>];</p>
<p>@NgModule( {<br>imports: [<br> CommonModule<br>],<br>declarations: [<br> MitPipeComponent,<br> ...pipe,<br>],<br>exports: [ ...pipe ],<br>schemas: [ CUSTOM_ELEMENTS_SCHEMA ]<br>})<br>export class MitPipeModule { }</p>
<p> </p>
<p>// ----- 引入module</p>
<p>// 管道 -- 把MitPipeModule丢到imports里面就行了<br>import { MitPipeModule } from '../../../../../widgets/mit-pipe/mit-pipe.module';</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/xiaogao6681/p/12056271.html
頁:
[1]