파이프라인이란 무엇입니까? Angular의 파이프라인(PIPE)에 대한 간략한 분석

파이프라인이란 무엇인가요? 이 글에서는 Angular의 파이프라인(PIPE)을 소개하고 파이프라인을 사용자 정의하는 방법에 대해 설명하겠습니다. 도움이 되길 바랍니다.

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

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

간단히 말하면, Angular Pipes는 문자열, 정수, 날짜 등을 포함한 입력을 필요에 따라 브라우저에 표시되는 특정 형식으로 변환하는 데 도움이 될 수 있습니다. 보간 표현식을 통해 파이프라인을 정의하고 특정 상황에서 사용할 수 있습니다. 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

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

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(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!