angular4裏一個響應式編程的小例子

響應式編程

觀察者模式與Rxjs

• 響應式編程就是一個觀察者模式的實現下邊是一個簡單的例子

//對一個對象進行觀察處理結束後在執行一些方法。
var subscription = Observable.from([1,2,3,4])//可觀察者對象 Observerable(l流)
.filter((e)=>e%2 == 0)//對數據進行一些處理
.map((e)=>e*e)//對數據進行一些處理
.subscribe(//訂閱Subscription
e=>console.log(e),//觀察者Observer  可以處理流中發射出來的元素
err=>console.error(error),//觀察者Observer  可以處理流中的異常
()=>console.log("結束了 ！")//觀察者Observer 可以在流結束的時候被調用 
//後邊的這兩個觀察者不是必須的可以去掉
); 
//這就是一個最簡單的響應式編程，也是一個觀察者模式，根據不同的結果進行不同的響應返回

• 可觀察者對象 Observerable(l流)：表示一組值或者事件的集合
  
  • 可觀察對象可以流，from是發射一些數據，fromevent是發射一些事件等
  • 可觀察對象還可以拋出異常
  • 可觀察對象還可以發出一個信號告訴觀察者流已經結束
• 觀察者Observer:一個回調函數的集合，他知道怎樣去監聽被Observable發送的值
  
  • 觀察者可以處理流中發射出來的元素
  • 觀察者可以處理流中的異常
  • 觀察者可以在流結束的時候被調用
• 訂閱Subscription：表示一個可觀察者對象，主要用於取消註冊(調用subscription.unsubscribe()取消註冊訂閱)

• 操作符Operators：純粹的函數，是開發者可以以函數編程的方式處理結合。

  響應式表單需要引入ReactiveFormsModule模塊

  • 該模塊裏邊提供的一個FomControld對象是用來處理表單元素的

<!--html-->
<!--綁定搜索表單流-->
<input type="text" placeholder="輸入內容" [formControl]="searchInput">

<!--ts-->
import {Component, OnInit} from '@angular/core';
import {FormControl} from "@angular/forms";
@Component({ ...})
export class SearchComponent implements OnInit {
  <!--定義了一個表單流-->
  searchInput: FormControl = new FormControl();
  constructor() {
  <!--觀察者模式，當該流的值改變時進行處理-->
    this.searchInput.valueChanges
      .debounceTime(3000)//等待3秒之後在執行下邊的觀察者
      .subscribe(stockCode => this.getStockInfo(stockCode));
  }
  getStockInfo(stockCode:string) {
    console.log(`獲取${stockCode}的股票信息`);
  }
}
<!--這就實現了當按鍵事件結束3000毫秒後在執行觀察者的需求-->