Angular7 - Ống

Trong chương này, chúng ta sẽ thảo luận về các đường ống trong Angular 7. Các đường ống trước đó được gọi là bộ lọc trong Angular1 và được gọi là đường ống từ Angular2 trở đi.

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

{{ Welcome to Angular 7 | 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:

Trong tệp app.component.ts, chúng tôi đã xác định biến tiêu đề như sau:

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 7 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:

Dưới đây là một số đường ống tích hợp có sẵn với góc -

• 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 trongapp.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 7 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 như hình dưới đây -

<!--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 tệp ts mới. Ở đây, chúng tôi muốn tạo đường ống tùy chỉnh sqrt. 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 ta phải đặt tên cho đường ống của mình, tên này sẽ được sử dụng trong tệp .html của chúng ta. 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ẽ thực hiện PipeTransform.

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 { AppRoutingModule } from './app-routing.module'; 
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, 
      AppRoutingModule
   ], 
   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 giống nhau 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>

Sau đây là kết quả -