Angular 6 - Ống

Trong chương này, chúng ta sẽ thảo luận về Pipes là gì trong Angular 6. Pipes trước đó được gọi là bộ lọc trong Angular1 và được gọi là pipe trong Angular 2 trở đi.

Các | ký tự được sử dụng để biến đổi dữ liệu. Sau đây là cú pháp cho cùng một

{{ Welcome to Angular 6 | lowercase}}

Nó lấy số nguyên, chuỗi, mảng và ngày làm đầu vào được phân tách bằng | được chuyển đổi theo định dạng theo yêu cầu và hiển thị giống nhau trên trình duyệt.

Chúng ta hãy xem xét một vài ví dụ sử dụng đường ống.

Ở đây, chúng tôi muốn hiển thị văn bản được viết hoa. Điều này có thể được thực hiện bằng cách sử dụng các đường ống như sau:

bên trong app.component.ts , chúng tôi đã xác định biến tiêu đề -

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
}

Dòng mã sau đi vào app.component.html tập tin.

<b>{{title | uppercase}}</b><br/>
<b>{{title | lowercase}}</b>

Trình duyệt xuất hiện như trong ảnh chụp màn hình sau:

Angular 6 cung cấp một số đường ống tích hợp sẵn. Các đường ống được liệt kê dưới đây -

• Lowercasepipe
• Uppercasepipe
• Datepipe
• Currencypipe
• Jsonpipe
• Percentpipe
• Decimalpipe
• Slicepipe

Chúng ta đã thấy các đường ống viết thường và viết hoa. Bây giờ chúng ta hãy xem các đường ống khác hoạt động như thế nào.

Dòng mã sau sẽ giúp chúng tôi xác định các biến bắt buộc trong app.component.ts tập tin -

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   todaydate = new Date();
   jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}};
   months = ["Jan", "Feb", "Mar", "April", "May", "Jun",
            "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
}

Chúng tôi sẽ sử dụng các đường ống trong app.component.html tập tin.

<!--The content below is only a placeholder and can be replaced.-->
<div style = "width:100%;">
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Uppercase Pipe</h1>
      <b>{{title | uppercase}}</b><br/>
      <h1>Lowercase Pipe</h1>
      <b>{{title | lowercase}}</b>
      <h1>Currency Pipe</h1>
      <b>{{6589.23 | currency:"USD"}}</b><br/>
      <b>{{6589.23 | currency:"USD":true}}</b> //Boolean true is used to get the sign of the currency.
      <h1>Date pipe</h1>
      <b>{{todaydate | date:'d/M/y'}}</b><br/>
      <b>{{todaydate | date:'shortTime'}}</b>
      <h1>Decimal Pipe</h1>
      <b>{{ 454.78787814 | number: '3.4-4' }}</b> // 3 is for main integer, 4 -4 are for integers to be displayed.
   </div>
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Json Pipe</h1>
      <b>{{ jsonval | json }}</b>
      <h1>Percent Pipe</h1>
      <b>{{00.54565 | percent}}</b>
      <h1>Slice Pipe</h1>
      <b>{{months | slice:2:6}}</b> 
      // here 2 and 6 refers to the start and the end index
   </div>
</div>

Các ảnh chụp màn hình sau đây hiển thị đầu ra cho mỗi đường ống:

Làm thế nào để tạo một đường ống tùy chỉnh?

Để tạo một đường ống tùy chỉnh, chúng tôi đã tạo một tstập tin. Ở đây, chúng tôi muốn tạosqrtống tùy chỉnh. Chúng tôi đã đặt cùng một tên cho tệp và nó trông như sau:

app.sqrt.ts

import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
   name : 'sqrt'
})
export class SqrtPipe implements PipeTransform {
   transform(val : number) : number {
      return Math.sqrt(val);
   }
}

Để tạo một đường ống tùy chỉnh, chúng ta phải nhập Pipe và Pipe Transform từ Angular / core. Trong chỉ thị @Pipe, chúng tôi phải đặt tên cho đường ống của chúng tôi, tên này sẽ được sử dụng trong tệp .html của chúng tôi. Vì chúng tôi đang tạo đường ống sqrt, chúng tôi sẽ đặt tên nó là sqrt.

Khi tiếp tục, chúng ta phải tạo lớp và tên lớp là SqrtPipe. Lớp này sẽ triển khaiPipeTransform.

Phương thức biến đổi được định nghĩa trong lớp sẽ nhận đối số là số và sẽ trả về số sau khi lấy căn bậc hai.

Vì chúng tôi đã tạo một tệp mới, chúng tôi cần thêm tệp đó vào app.module.ts. Điều này được thực hiện như sau:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Chúng tôi đã tạo ra app.sqrt.tslớp học. Chúng tôi phải nhập cùng một trongapp.module.tsvà chỉ định đường dẫn của tệp. Nó cũng phải được bao gồm trong các khai báo như được hiển thị ở trên.

Bây giờ chúng ta hãy xem lệnh gọi đến đường ống sqrt trong app.component.html tập tin.

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b>
<br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>

Đầu ra trông như sau: