Angular 2 - Ống tùy chỉnh

Angular 2 cũng có cơ sở để tạo các đường ống tùy chỉnh. Cách chung để xác định một đường ống tùy chỉnh như sau.

import { Pipe, PipeTransform } from '@angular/core';  
@Pipe({name: 'Pipename'}) 

export class Pipeclass implements PipeTransform { 
   transform(parameters): returntype { } 
}

Ở đâu,

• 'Pipename' - Đây là tên của đường ống.

• Pipeclass - Đây là tên của lớp được gán cho đường ống tùy chỉnh.

• Transform - Đây là chức năng làm việc với đường ống.

• Parameters - Đây là các thông số được truyền vào đường ống.

• Returntype - Đây là kiểu trở lại của đường ống.

Hãy tạo một đường ống tùy chỉnh nhân 2 số. Sau đó, chúng tôi sẽ sử dụng đường ống đó trong lớp thành phần của chúng tôi.

Step 1 - Đầu tiên, hãy tạo một tệp có tên là kernel.pipe.ts.

Step 2 - Đặt đoạn mã sau vào tệp đã tạo ở trên.

import { 
   Pipe, 
   PipeTransform 
} from '@angular/core';  

@Pipe ({ 
   name: 'Multiplier' 
}) 

export class MultiplierPipe implements PipeTransform { 
   transform(value: number, multiply: string): number { 
      let mul = parseFloat(multiply); 
      return mul * value 
   } 
}

Những điểm sau đây cần được lưu ý về mã trên.

• Đầu tiên chúng tôi nhập các mô-đun Pipe và PipeTransform.

• Sau đó, chúng tôi đang tạo một Pipe với tên 'Multiplier'.

• Tạo một lớp gọi là MultiplierPipe triển khai mô-đun PipeTransform.

• Sau đó, hàm biến đổi sẽ nhận giá trị và nhiều tham số và xuất ra phép nhân của cả hai số.

Step 3 - Trong tệp app.component.ts, hãy đặt đoạn mã sau.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>' 
}) 
export class AppComponent {  }

Note - Trong mẫu của chúng tôi, chúng tôi sử dụng đường ống tùy chỉnh mới của chúng tôi.

Step 4 - Đảm bảo mã sau được đặt trong tệp app.module.ts.

import {
   NgModule
} from '@angular/core';

import {
   BrowserModule
} from '@angular/platform-browser';

import {
   AppComponent
} from './app.component';

import {
   MultiplierPipe
} from './multiplier.pipe'

@NgModule ({
   imports: [BrowserModule],
   declarations: [AppComponent, MultiplierPipe],
   bootstrap: [AppComponent]
})

export class AppModule {}

Những điều sau đây cần được lưu ý về đoạn mã trên.

• Chúng tôi cần đảm bảo bao gồm mô-đun MultiplierPipe của chúng tôi.

• Chúng tôi cũng cần đảm bảo nó được bao gồm trong phần khai báo.

Khi bạn lưu tất cả các thay đổi mã và làm mới trình duyệt, bạn sẽ nhận được kết quả sau.