pipe相當于angular1里面的filter

做一些格式轉換啊，或者從一個數組里面選取一個元素等等

只要你愿意可以定義很復雜的內容‘’

我們先看看 angular2 里面自帶的一些pipe

我們去我們的week3

下的problem-list下

我們到html里面

?

之前是這樣的

?

?之后是這樣的

?

?

?

我們再寫三個angular2自帶的pipe

然后我們去Controller去對應一下

?

?

?

我們還可以 讓日期更詳盡一點

甚至我們可以使用多個pipe

以上就是 angular2自帶的pipe

?

如果你想實現功能復雜的pipe 類似angular1里面的filter就需要你自己去實現

?

?

我們今天要做到的事就是我們的problemlist 頁面 navbar里面有個search我們一直都沒用過

我們希望我在搜索框內 搜索 S就可以將 所有的problem過濾一下 將 帶有S的問題篩選出來

?

?

首先呢

我們需要跟蹤我們在input框內輸入的內容

建一個observable?

?我們要sub這個input框內的value change的observable

?

我們需要將value傳遞一個pipe

?

我們從后往前實現

我們先實現pipe 來過濾問題列表

han@han-VirtualBox:~/Projects/BittigerCS503/week3$ ls launcher.sh oj-client oj-server public han@han-VirtualBox:~/Projects/BittigerCS503/week3$ cd oj-client/ han@han-VirtualBox:~/Projects/BittigerCS503/week3/oj-client$ ls angular.json node_modules README.md e2e package.json src karma.conf.js protractor.conf.js tslint.json han@han-VirtualBox:~/Projects/BittigerCS503/week3/oj-client$ cd src han@han-VirtualBox:~/Projects/BittigerCS503/week3/oj-client/src$ cd app han@han-VirtualBox:~/Projects/BittigerCS503/week3/oj-client/src/app$ ls app.component.css app.component.ts components models app.component.html app.module.ts messages services app.component.spec.ts app.routes.ts mock-problems.ts han@han-VirtualBox:~/Projects/BittigerCS503/week3/oj-client/src/app$ mkdir pipes han@han-VirtualBox:~/Projects/BittigerCS503/week3/oj-client/src/app$ cd pipes/ han@han-VirtualBox:~/Projects/BittigerCS503/week3/oj-client/src/app/pipes$ ls han@han-VirtualBox:~/Projects/BittigerCS503/week3/oj-client/src/app/pipes$ ng g pipe search CREATE src/app/pipes/search.pipe.spec.ts (187 bytes) CREATE src/app/pipes/search.pipe.ts (201 bytes) UPDATE src/app/app.module.ts (1846 bytes) han@han-VirtualBox:~/Projects/BittigerCS503/week3/oj-client/src/app/pipes$ pipes

?

創建2個文件 更新了一個文件

?

?

和component一樣不用手動添加?

區別于service需要手動的情況

?

?

?那么怎么用呢

我去到問題列表的html 找到 遍歷問題列表的位置

我們看看能search到什么東西

發現我們的問題列表不見了

為了看清楚我們在input列表中傳遞的值

我們就將他打印出來看

這是因為我們return null

如果我們return value 就是將問題列表數組原樣返回

?

既然我們返回的value

是個數組 那么我們就可以對這個數組進行操作

比如 我們可以對數組進行 篩選操作

滿足條件的返回

我們用的是JS的filer()這個方法呢 需要一個callback function作為他的args

?

為了更明顯 我們 將value改成probkems 這樣更清楚

?

少打了個t

?

我們看看是不是

?

我們發現原來4個問題變成2個 并且名字中帶sum 且不區分大小寫

但是呢 sum使我們寫死的 我希望用變量 那么 就要提到剛才沒提的args了

那么

?

那么我在哪里傳入這個term呢？

我們去在使用pipe的地方

在search的后背可以傳入參數

刷新頁面

發現是可以的

既然可以 那么 這個參數當然可以是變量 后邊會做

?

?

第二呢,就是navbar哪里的input框內的內容如何傳遞到 第一步的 我們的component? problemlist里面去呢？

就是從一個component傳遞值給另外一個component

當然我們可以創建一個service 讓他和這2個component做通信

還有別的通信方式

就是將2個component和他們的parent component 也就是 app component 進行通信

但是這樣很繁瑣

?

所以我們還是采取service的方法

?

?

search.pipe.spec.ts search.pipe.ts han@han-VirtualBox:~/Projects/BittigerCS503/week3/oj-client/src/app/pipes$ cd .. han@han-VirtualBox:~/Projects/BittigerCS503/week3/oj-client/src/app$ ls app.component.css app.component.ts components models app.component.html app.module.ts messages pipes app.component.spec.ts app.routes.ts mock-problems.ts services han@han-VirtualBox:~/Projects/BittigerCS503/week3/oj-client/src/app$ cd services/ han@han-VirtualBox:~/Projects/BittigerCS503/week3/oj-client/src/app/services$ ng g s input input service

我們知道和component不同 service不會自動寫入app modules 需要我們手動 寫入 其中的provoide菜能供所有component使用

這樣我們就可以在所有的component中使用了

比如我們的navbar和problemlist

?

我們不是在service里面直接傳遞 因為如果用service的component的多了 并且某個component想改變值 那么就會很麻煩 耦合性太強

?

我們的做法是在service里面做一個? subject

?

?

我用他也是因為他有狀態 比如我們給的值是空 那么 我們所有的problemlist內容都會顯示出來作為默認

為了安全我們 需要將他做成observable返回。

inputservice就寫完了

?

最后一步就是

?

?

?

這樣 我們就可以在我們的navbar component里面使用

我們想無論哪個頁面 problemlist 還是problemdetail也好 只要有search框的地方 輸入內容 就自動跳轉到符號條件的problemlist頁面

加這2個就可以去ts文件 Controller去實現了

?

還有一個

如果不在problem頁面的話

就跳轉到problemlist頁面

?

?

?

?我們把problemlist頁面那個參數改成變量

?

然后我們要從inputservice里面拿到值

?

?

然后我們看看有沒有將值傳遞過去

?我們輸入s

我們輸入sum

?

轉載于:https://www.cnblogs.com/PoeticalJustice/p/9459756.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的20.pipe的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。