时间戳

首页 > 解决方案 > 当我们在 html 中使用时，角度编译器如何解释 Pipe？

angular - 当我们在 html 中使用时，角度编译器如何解释 Pipe？

问题描述

我知道如何在角度 ts 文件或 html 文件中使用管道来过滤数据。但是我不明白当我们在 html 文件中使用它时，角度编译器如何解释我们的管道。鉴于组件，它如何附加管道类对象？

标签： angularfiltercompiler-constructionpipe

解决方案

为简单起见，我将从一个示例开始，我们有一个字符串数组，我们想应用一个管道来缩短它的句子或字符串

myArray= ['HereISTheFirstString' , 'HereISTheSecondString' , 'HereISTheThirdString']

所以我们要创建一个新文件让我们调用shorten.pipe.ts，在文件里面

import { PipeTransform } from '@angular/core';
@Pipe({
  name: 'shorten'
})
export class ShortenPipe implements PipeTransform {
   transform(value: any) {
     return value.substr(0 , 12) + '...';
    }
}

要使用它，您必须添加到声明数组中app.module.ts，现在我们需要在我们的 HTML 页面中使用它

<div *ngFor="let str of myArray">
   <h3> {{ str | shorten }} </h3>
<div>

那么它实际上是如何工作的，每当编译器看到shorten我们在其中定义它时它就会工作@Pipe({ name: 'shorten' })- 你可以调用它 - 它会调用转换函数并将字符串作为值传递给它并返回结果。

您还可以通过 pramaters 来转换函数，例如

   transform(value: any, limit: number) {
     if(value.length > limit)
        return value.substr(0 , limit) + '...';
      return value;
    }

对于 HTML

<div *ngFor="let str of myArray">
   <h3> {{ str | shorten: 10 }} </h3>
<div>

对于:缩短管道后，它接受一个参数，该参数指示应如何限制输出字符串，因此只要:它是一个参数。

管道中的另一件事

链接管道

展示一系列管道如何工作的简单示例

<div>
{{ yourDate | date:'fullDate' | uppercase }}
</div>

它将从左到右并应用不同的管道。

我希望你能发现这很有用。

推荐阅读