链管

Question

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

Answer 1

为简单起见，我将以一个示例开始，我们有一个字符串数组，我们希望应用管道来缩短其句子或字符串

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' })，它就可以工作-您可以随便调用它-它将调用转换函数并将字符串作为值传递给并返回结果。

您还可以通过实用程序来转换功能，例如

   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>

它将从左向右移动并应用不同的管道。

我希望您会发现它有用。

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

1 个答案:

链管