Angular4中自定義管道

angular 是由谷歌開發與維護乙個開發跨平台應用程式的框架，同時適用於手機與桌面。管道的作用是把資料作為輸入，然後轉換它，給出期望的輸出。

7.1 使用管道

如：

import  from '@angular/core';

@component(}`})
export class herobirthdaycomponent 
// 不使用管道時，顯示：
// fri apr 15 1988 00:00:00 gmt+0800 (中國標準時間)
複製**

}

// apr 15, 1988
複製**

上面的案例中，使用的是data管道，來進行時間轉換，有其預設的轉換格式，我們也可以自定義轉換格式，只需要像data管道中傳遞引數就可以了。

比如我們想要上面的資訊轉換為1998/03/15的格式

}

複製**

7.3 自定義管道

angular4還支援自定義管道，你可以自己定義想要的管道。

近期接到這樣乙個需求：

要求在多個頁面中顯示使用者的頭像，但有的使用者沒有上傳頭像的話，就需要系統根據使用者性別顯示預設的男/女頭像。

當然這樣乙個簡單的需求無論你是在html進行判斷還是在js中判斷都可以實現。

當若是有多個頁面都需要用到的話，似乎也是一項比較繁重的任務。

所以你可以選擇封裝乙個共用的方法在每個頁面進行呼叫或者可以嘗試自定義乙個管道。

博主工作中使用的是前端框架angularjs4，專案整體是使用angular-cli進行搭建的，下面介紹的是如何在angularjs中自定義乙個管道。

1.確定需求

多個頁面顯示使用者頭像

若是頭像位址不存在則判斷使用者性別
根據使用者性別顯示預設的男女頭像
若是性別和頭像位址都不存在則顯示預設的人形頭像
複製**

2.設計管道

(common資料夾是我存放一些公共元件/方法/管道的資料夾,它是乙個功能的模組，其中的所有元件/方法/管道我都會在common資料夾下的shared.module.ts中進行匯出)

2.編寫comm.pipe.ts

自定義管道需要先引入@angular/core中的pipe和pipetransform

import  from '@angular/core';

const ***list = ['', '男', '女'];
const uheadimg = ['./assets/images/default_male.png', './assets/images/boy.png', './assets/images/girl.png'];
@pipe()
export class portrait implements pipetransform  else 
return url;
}}複製**

3.匯出自定義管道

import  from '@angular/core';

import  from './pipe/comm.pipe';
...@ngmodule()
export class sharedmodule 
複製**

4.使用管道

如在student這個模組中使用

1.首先在student.module.ts中引用

import  from '@angular/core';

import  from "./../common/shared.module";
...import  from "./students"; //students為該模組下的乙個頁面
@ngmodule()
export class studentmodule 
複製**

class="uhead">
學員頭像：span>
src="}"
title="頭像"
alt="頭像">
div>
複製**
5.總結

在angularjs4中使用管道總結為這麼幾步：

1.定義乙個自定義管道的ts並引入@angular/core中的pipe來編寫管道
2.將自定義管道的ts在模組中匯出
3.要使用管道的模組中引入管道模組
4.html中使用的話採用以下方式：
}  // pipename為你自定義的管道名稱

複製**

angular4自定義雙向繫結

最近在工作中遇到了自定義元件，實現雙向繫結，之前也有這樣的需求，不過都被我這樣那樣的用較麻煩的方法避開了，不過這次還是老老實實地用雙向繫結吧。自定義元件 1 component 實現資料的傳遞 output search new eventemitter output valuechange new...

Angular4學習筆記之管道

管道 pipes把資料作為輸入，然後轉換它，給出期望的輸出。每個應用開始的時候差不多都是一些簡單任務 獲取資料 轉換它們，然後把它們顯示給使用者。angular內建了一些管道，比如datepipe uppercasepipe lowercasepipe currencypipe和percentpip...

如何自定義Angular2 管道

1.說明 管道用來轉換模板顯示的內容，應用程式中經常出現獲取資料，轉換資料，顯示資料的邏輯。管道就是用來在轉換資料階段起作用的。主要存在兩種型別的管道，pure pipe和impure pipe 2.pure pipe pure pipe，stateless，關注於純粹物件的變更，檢測到輸入值發生了...