Angular의 파이프라인(PIPE)에 대해 이야기하는 기사

파이프란 무엇인가요? 이번 글에서는 Angular의 파이프라인(PIPE)을 소개하고, 내장 파이프라인과 커스텀 파이프라인의 방법에 대해 이야기해보겠습니다.

파이프라인(PIPE)이란 무엇입니까?

---

PIPE는 파이프라인으로 번역됩니다. 각도 파이프는 HTML 구성 요소에서 선언할 수 있는 표시 값 변환을 작성하는 방법입니다. Angular 파이프라인은 이전에 AngularJS에서 필터로 알려졌으며 Angular 2 이후로는 파이프로 알려져 있습니다. 파이프는 데이터를 입력으로 받아 이를 원하는 출력으로 변환합니다. [관련 튜토리얼 권장 사항: angular tutorial, Programming Teaching]

간단히 말하면 Angular Pipes는 문자열, 정수, 날짜 등을 포함한 입력을 필요 형식에 따라 특정 데이터로 변환하고 표시하는 데 도움이 될 수 있습니다. 브라우저에서. 보간 표현식을 통해 파이프라인을 정의하고 특정 상황에서 사용할 수 있습니다. Angular는 다양한 유형의 파이프라인을 제공합니다. 물론 파이프라인을 사용자 지정할 수도 있습니다.

비교적 간단한 예를 들자면, 다양한 날짜 형식이 있습니다. 파이프라인을 통해 초를 시, 분, 초로 변환하는 등 다양한 형식 간에 변환할 수 있습니다.

내장 파이프

---

위에서 언급했듯이 Angular는 다양한 유형의 파이프를 제공합니다. 내장 파이프는 모두 Angular의 내장 파이프입니다. 아래에서 이를 사용하여 코드를 통해 시연해 보세요.

타임 파이프라인 datedate

我们新建一个 Angular 项目，并且在页面中添加一个 new Date()：

<div>{{data}}</div>
...
export class AppComponent {
  title = &#39;my-app&#39;;
  data = new Date()
}

页面就会显示当前的时间：

那么我们接下去就可以使用内置的管道来进行一个时间格式的转化，管道的语法需要在变量后面添加 | 符号，并且声明管道

<div>{{data | date:&#39;yyyy-MM-dd&#39;}}</div>

这里我们用到了 date

새 Angular 프로젝트를 생성하고 페이지에 new Date()를 추가합니다.

<div>{{&#39;ASDasd&#39; | uppercase }}</div>

페이지에 현재 날짜가 표시됩니다. 시간:

그런 다음 내장 파이프라인을 사용하여 시간 형식을 변환할 수 있습니다. 파이프라인 구문에서는 변수 뒤에 | 기호를 추가하고 파이프라인을 선언해야 합니다.

ng g p pipes/pipe-name

여기에서는 를 사용합니다. 날짜 이 파이프라인은 파이프라인의 특정 매개변수에 대한 자세한 내용을 보려면 변환을 위해 제공되는 모든 시간 형식을 소개하는 공식 문서를 읽을 수 있습니다.

Angular - DatePipehttps://angular.cn/api/common/DatePipe#description

파이프라인을 설정한 후 브라우저의 시간이 변경되었습니다

Others Pipes

Angular는 통화 형식(통화)을 변경하는 파이프와 같은 다른 파이프도 제공합니다.

Angular - MoneyPipe

https://angular.cn/api/common/CurrencyPipe

문자열을 대문자(대문자)로 변환하는 파이프:

  transform(value: unknown, ...args: unknown[]): unknown {
    return 'tests';
  }
  ...
  <div>{{&#39;ASDasd&#39; | tests }}</div>

---

Angular - UpperCasePipe

https://angular.cn/api/common/UpperCasePipe

custom Pipe

몇 가지를 소개했습니다. 내장된 파이프라인이 우리의 개발 요구 사항을 충족할 수 없는 경우 Angular는 사용자 지정 파이프라인도 제공합니다. 파이프라인을 직접 정의하고 입력을 변환하는 방법을 정의할 수 있습니다.

Angular에서 제공하는 명령줄을 통해 파이프라인을 빠르게 생성할 수 있습니다.

  transform(value: string, ...args: number[]): string {
    let defaultLength = 10;
    if((args[0] || defaultLength )< value.length){
      return value.substr(0,args[0] || defaultLength)+&#39;...&#39;
    }else{
      return value
    }
  }
  ...
  <div>{{&#39;sssssssssssssssssssssssssssssss&#39; | tests: 30 }}</div>

여기서 test라는 이름의 파이프라인을 만들었습니다.

위 명령을 실행하면 src 아래에 파이프 폴더가 생성됩니다. , 사용자 정의 파이프를 저장합니다

🎜🎜🎜🎜 그러면 Angular가 자동으로 이러한 파이프를 앱에 소개하므로 전 세계 어디에서나 사용자 정의 파이프를 사용할 수 있습니다. 🎜🎜🎜🎜🎜파이프 폴더 아래에 파이프가 있습니다. 파이프는 본질적으로 클래스입니다. 여기서 데코레이터는 테스트 이름을 지정하는 데 사용됩니다. 🎜

在这个类里面我们需要去实现 PipeTransfrom 这个接口，也就是需要有 transform 这个方法，在这个方法中，第一个参数就是要放入管道的输入，第二个数据是我们向管道传递的参数，管道中把它放入了一个数组里面。

这个 transform 方法返回什么，我们的页面拿到的就是什么数据，我们先来做一个测试

  transform(value: unknown, ...args: unknown[]): unknown {
    return 'tests';
  }
  ...
  <div>{{&#39;ASDasd&#39; | tests }}</div>

返回一个固定的字符串，并且在页面中去使用它

可以看到返回的结果变成了 tests 字符串，这样我们就可以确定这个方法的返回值就是最终的输出。

接下来我们实现一个简单的字符串超出截取的管道：

  transform(value: string, ...args: number[]): string {
    let defaultLength = 10;
    if((args[0] || defaultLength )< value.length){
      return value.substr(0,args[0] || defaultLength)+&#39;...&#39;
    }else{
      return value
    }
  }
  ...
  <div>{{&#39;sssssssssssssssssssssssssssssss&#39; | tests: 30 }}</div>

这样就能够对字符串进行一个截取并且在尾部添加 ...

总结

---

本文我们学习了 Angular 中管道的使用，简单的来说管道就是一个方法，可以将你的输入转化为特定的你需要的输出格式，Angular提供给了我们许多的内置管道，当内置管道不满足你的要求的时候，你还可以通过自定义管道来更加灵活的自定义输出格式

更多编程相关知识，请访问：编程视频！！

위 내용은 Angular의 파이프라인(PIPE)에 대해 이야기하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!