angular5 通過服務實現資料的傳遞

父子元件的資料傳遞使用屬性傳值，而兄弟元件的資料傳遞是使用中間人模式。而兩者之間沒有直接關係則是用服務(兩者共同的依賴)來聯絡。

1. 專案需求(搜尋元件和商品元件)

a. 搜尋元件(通過單擊搜尋按鈕，來實現右側的商品元件的顯示結果， 是乙個響應的表單)

b. 商品列表元件(是乙個單獨的元件，顯示商品的列表)

2. 本次迭代的需求，當在搜尋元件中填寫相關的內容，然後單擊"搜尋"按鈕，然後在商品的列表的元件中顯示符合你選擇的條件的商品，當都不選擇時， 顯示所有的         商品列表。

搜尋元件和產品元件擁有共同的服務，服務的檔案的名稱為：product.service.ts，在這個元件中，要實現的是：

在這個服務的檔案中首先要實現的功能是：

一，在服務中，含有向伺服器傳送http請求的函式

1 search(params: productsearchparams): observable).map((res) =>res.json());3}

45private encodeparams(params: productsearchparams) , new
urlsearchparams());
13return
result;
14 }

1

export class productsearchparams 
9 }

二， 

1  searchevent: eventemitter= new eventemitter();

三，在搜尋元件中給搜尋按鈕新增click事件，通過響應式表單實現，此時要注意的是key值的統一，即表單的字段的key和搜尋表單的formcontrolname的名字key值要一樣，在這個檔案中，不把eventemitter新增到這個檔案中的作用是實現搜尋元件和商品元件的解耦：

1

onsubmit() 
7 }

1

ngoninit() );7//
通過搜尋按鈕實現的發射的流的接收和訂閱
8this
.productservice.searchevent.subscribe(
9 params => this.productservice.search(params).subscribe(data => this.products =data)10)
11 }

獲取http的流的觸發，即訂閱服務中的search事件函式，通過subscribe來觸發從伺服器中獲取資料。

注： 1. 在獲取的products陣列展示在模板中，由於是從伺服器中獲取的資料，是非同步的操作，所以存在頁面的展示的時候，後端的資料仍然沒有返回的時候，所以在模板上使用（？.）的格式來展示資料，而*ngfor指令則不需這麼做，是因為它自己有自己的判斷空值的操作，所以不會報錯。

五，node伺服器的設定的**的編寫：

(req, res) )

9}

1011

if (params.price && result.length > 0) )15}

1617

if (params.category && params.category != '-1' && result.length > 0) )

23}

2425

res.json(result);

26 })

本文中最重要的是通過服務來傳送和訂閱來實現資料的傳遞。將事件的觸發和接收訂閱都放在服務中，而使搜尋元件和商品元件的解耦，而這是元件的編寫的核心思想。

angular2 通過指令限制輸入

最近在寫乙個表單，有些輸入框只能輸入數字，單又不想每次寫表單的時候，都要去驗證輸入的是不是數字，那麼就想到直接限制只能輸入數字，通過指令實現 這裡需要注意的是，不只更改dom的值，如果input為資料繫結的值，需要更新繫結值，所以需要引入ngmodel,通過viewtomodelupdate,來更新...

html5通過canvas實現刮刮卡效果示例分享

修改img.src時塗層也會自動適應新的尺寸.修改layer函式可更改塗層樣式 以下是html源 已增加移動裝置支援 複製 如下 需要判斷是否刮完時用這段 替換原 的eventup事件處理函式 複製 如下 e.preventdefault mousedown false var data ctx.g...

Angular 5 子元件與父元件實現資料雙向繫結

1.實現父元件和子元件間 資料的雙向繫結 2.描述 子元件和父元件間，各有乙個標籤，在父元件input 內容，子元件的input 標籤上同步 在子元件的input 上輸入內容，父元件input 標籤頁同步 3.具體實現 在父元件html中寫如下 子元件input標籤 home input homei...