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>{{ 'Angular' | uppercase }}</p> <p>{{ 'Angular' | uppercase }}</p> <!-- Output: ANGULAR --> </div>
<div> <p ngNonBindable>{{ today | date: 'shortTime' }}</p> <p>{{ today | date: 'shortTime' }}</p> <!-- Output: 以当前时间为准,输出格式:10:40 AM --> </div>
<div> <p ngNonBindable>{{ 3.14159265 | number: '1.4-4' }}</p> <p>{{ 3.14159265 | number: '1.4-4' }}</p> <!-- Output: 3.1416 --> </div>
<div> <p ngNonBindable>{{ { name: 'semlinker' } | json }}</p> <p>{{ { name: 'semlinker' } | json }}</p> <!-- Output: { "name": "semlinker" } --> </div>
管道可以接收任意数量的参数,使用方式是在管道名称后面添加:
和参数值。如number: '1.4-4'
,若需要传递多个参数则参数之间用冒号隔开,具体示例如下:
<div> <p ngNonBindable>{{ 'semlinker' | slice:0:3 }}</p> <p>{{ 'semlinker' | slice:0:3 }}</p> <!-- Output: sem --> </div>
可以将多个管道连接在一起,组成管道链对数据进行处理。
<div> <p ngNonBindable>{{ 'semlinker' | slice:0:3 | uppercase }}</p> <p>{{ 'semlinker' | slice:0:3 | uppercase }}</p> </div>
下面以过往项目中使用的管道为示例,讲解自定义管道步骤:
使用 @Pipe
装饰器定义 Pipe
的 metadata
信息,如 Pipe
的名称 - 即 name
属性
实现 PipeTransform
接口中定义的 transform
Angular Pipes
는 |
로 구분된 정수, 문자열, 배열 및 날짜를 입력으로 가져온 다음 필요에 따라 형식으로 변환하여 브라우저에 표시합니다. 보간 표현식에서는 파이프를 정의하고 상황에 따라 사용할 수 있습니다. Angular
응용 프로그램에서 사용할 수 있는 파이프 유형은 다양합니다. String code > -> <code>문자열
LowerCasePipe
번호 code > -> <code>문자열
🎜객체 코드 > -> <code>문자열
🎜도구
🎜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:'*',params:{opacity:'0',duration:'200ms'}}"> {{errorMessage.error | formatError:"auth"}} </div> </div>
:
와 매개변수 값을 추가하세요. 예를 들어 번호: '1.4-4'
와 같이 여러 매개변수를 전달해야 하는 경우 매개변수를 콜론으로 구분해야 합니다. 구체적인 예는 다음과 같습니다. 🎜rrreee@Pipe
데코레이터는 Pipe
의 이름과 같은 Pipe
의 메타데이터
정보를 정의합니다. 즉, name code> attribute🎜🎜PipeTransform
인터페이스🎜🎜🎜🎜🎜define🎜🎜rrreee🎜🎜use🎜에 정의된 transform
메서드를 구현합니다. 🎜rrreee🎜🎜끝~ 🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜위 내용은 Angular의 PIPE(파이프라인)에 대한 깊은 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!