Angular의 PIPE(파이프라인)에 대한 깊은 이해

angular에서는 파이프를 사용하여 입력 데이터를 처리할 수 있으며, 파이프마다 기능이 다릅니다. 그렇다면 파이프를 구체적으로 사용하는 방법은 무엇입니까? 다음 기사에서는 Angular의 PIPE(파이프라인)에 대한 심층적인 연구와 사용 방법을 안내합니다.

PIPE, 파이프로 번역됨. Angular 파이프는 HTML 구성 요소에서 선언할 수 있는 표시 값 변환을 작성하는 방법입니다. Angular 파이프는 이전에 AngularJS에서 필터라고 불렸으며 Angular 2 이후로는 파이프라고 불렸습니다. 파이프는 데이터를 입력으로 받아 이를 원하는 출력으로 변환합니다. PIPE，翻译为管道。Angular 管道是编写可以在HTML组件中声明的显示值转换的方法。Angular 管道之前在 AngularJS 中被称为过滤器，从 Angular 2开始就被称为管道。管道将数据作为输入并将其转换为所需的输出。

Angular Pipes 将整数、字符串、数组和日期作为输入，用| 分隔，然后根据需要转换成格式，并在浏览器中显示出来。在插值表达式中，可以定义管道并根据情况使用它，在 Angular 应用程序中可以使用许多类型的管道。

【相关教程推荐：《angular教程》】

内建管道

• String -> String

  • UpperCasePipe

  • LowerCasePipe

  • TitleCasePipe

• Number -> String

  • DecimalPipe

  • PercentPipe

  • CurrencyPipe

• Object -> String

  • JsonPipe

  • DatePipe

• Tools

  • SlicePipe

  • AsyncPipe

  • I18nPluralPipe

  • I18nSelectPipe

使用方法

大写转换

<div>
  <p ngNonBindable>{{ &#39;Angular&#39; | uppercase }}</p>
  <p>{{ &#39;Angular&#39; | uppercase }}</p> <!-- Output: ANGULAR -->
</div>

日期格式化

<div>
  <p ngNonBindable>{{ today | date: &#39;shortTime&#39; }}</p>
  <p>{{ today | date: &#39;shortTime&#39; }}</p> <!-- Output: 以当前时间为准，输出格式：10:40 AM -->
</div>

数值格式化

<div>
  <p ngNonBindable>{{ 3.14159265 | number: &#39;1.4-4&#39; }}</p>
  <p>{{ 3.14159265 | number: &#39;1.4-4&#39; }}</p> <!-- Output: 3.1416 -->
</div>

JavaScript 对象序列化

<div>
  <p ngNonBindable>{{ { name: &#39;semlinker&#39; } | json }}</p>
  <p>{{ { name: &#39;semlinker&#39; } | json }}</p> <!-- Output: { "name": "semlinker" } -->
</div>

管道参数

管道可以接收任意数量的参数，使用方式是在管道名称后面添加:和参数值。如number: '1.4-4'，若需要传递多个参数则参数之间用冒号隔开，具体示例如下：

<div>
  <p ngNonBindable>{{ &#39;semlinker&#39; | slice:0:3 }}</p>
  <p>{{ &#39;semlinker&#39; | slice:0:3 }}</p> <!-- Output: sem -->
</div>

管道链

可以将多个管道连接在一起，组成管道链对数据进行处理。

<div>
  <p ngNonBindable>{{ &#39;semlinker&#39; | slice:0:3 | uppercase }}</p>
  <p>{{ &#39;semlinker&#39; | slice:0:3 | uppercase }}</p>
</div>

自定义管道

下面以过往项目中使用的管道为示例，讲解自定义管道步骤：

• 使用 @Pipe 装饰器定义 Pipe 的 metadata 信息，如 Pipe 的名称 - 即 name 属性

• 实现 PipeTransform 接口中定义的 transform

  Angular Pipes는 |로 구분된 정수, 문자열, 배열 및 날짜를 ​​입력으로 가져온 다음 필요에 따라 형식으로 변환하여 브라우저에 표시합니다. 보간 표현식에서는 파이프를 정의하고 상황에 따라 사용할 수 있습니다. Angular 응용 프로그램에서 사용할 수 있는 파이프 유형은 다양합니다.

【관련 튜토리얼 추천: "

angular tutorial"】

내장 파이프라인

• String</ code > -> <code>문자열
  • UpperCasePipe

  • LowerCasePipe

  • TitleCasePipe
    🎜🎜
  • 🎜번호</ code > -> <code>문자열🎜
    • 🎜DecimalPipe🎜🎜
    • 🎜PercentPipe🎜🎜
    • 🎜CurrencyPipe🎜🎜🎜🎜
    • 🎜객체</ 코드 > -> <code>문자열🎜
      • 🎜JsonPipe🎜🎜
      • 🎜DatePipe🎜🎜🎜🎜
      • 🎜도구🎜
        < li >🎜SlicePipe🎜🎜
        • 🎜AsyncPipe🎜🎜
        • 🎜I18nPluralPipe🎜🎜
        • 🎜I18nSelectPipe🎜🎜🎜🎜🎜

          🎜사용 방법🎜

          🎜자본 변환🎜🎜

          import { Pipe, PipeTransform } from "@angular/core";
          
          @Pipe({ name: "formatError" })
          export class FormatErrorPipe implements PipeTransform {
              constructor() {}
          
              transform(value: any, module: string) {
                  if (value.code) {
                      return value.desc;
                  } else {
                      return value.message;
                  }
              }
          }

          🎜날짜 형식 지정 🎜🎜

          <div *ngIf="errorMessage">
              <div class="message-box error mb-16" [@animate]="{value:&#39;*&#39;,params:{opacity:&#39;0&#39;,duration:&#39;200ms&#39;}}">
                  {{errorMessage.error | formatError:"auth"}}
              </div>
          </div>

          🎜숫자 형식 지정🎜🎜rrreee

          🎜JavaScript 객체 직렬화🎜🎜rrreee

          🎜파이프라인 매개변수🎜

          🎜파이프라인은 여러 개의 매개변수를 받을 수 있습니다. 이를 사용하려면 파이프 이름 뒤에 :와 매개변수 값을 추가하세요. 예를 들어 번호: '1.4-4'와 같이 여러 매개변수를 전달해야 하는 경우 매개변수를 콜론으로 구분해야 합니다. 구체적인 예는 다음과 같습니다. 🎜rrreee

          🎜 파이프 체인 🎜

          🎜은 여러 파이프를 함께 연결하여 파이프라인 체인을 형성하여 데이터를 처리할 수 있습니다. 🎜rrreee

          🎜커스텀 파이프라인🎜

          🎜다음은 커스텀 파이프라인의 단계를 설명하기 위해 과거 프로젝트에서 사용된 파이프라인을 예로 사용합니다. 🎜
          • 🎜사용법 @Pipe 데코레이터는 Pipe의 이름과 같은 Pipe의 메타데이터 정보를 정의합니다. 즉, name code> attribute🎜🎜
          • 🎜PipeTransform 인터페이스🎜🎜🎜🎜🎜define🎜🎜rrreee🎜🎜use🎜에 정의된 transform 메서드를 구현합니다. 🎜rrreee🎜🎜끝~ 🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜

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