Angular4-線上競拍應用-響應式程式設計

• 可觀察者Observable（流）：表示一組值或者事件的集合
• 觀察者Observer：一個回調函數的集合，它知道怎樣去監聽被Observable發送的值
• 訂閱Subscription：表示一個可觀察對象，主要用于取消注冊
• 操作符Operators：純粹的函數，使開發者可以以函數程式設計的方式處理集合。

A被指派為B和C的值。這時，如果我們改變B的值，A的值并不會随之改變。而如果我們運用一種機制，當B或者C的值發現變化的時候，A的值也随之改變，這樣就實作了”響應式“。

下面三個重要的概念是響應式流API的建構基礎：

• 釋出者是事件的發送方，可以向它訂閱。
• 訂閱者是事件訂閱方。
• 訂閱将釋出者和訂閱者聯系起來，使訂閱者可以向釋出者發送信号。

響應式程式設計就是：就是異步資料流程式設計

constructor() {
    /**
     * 被觀察者可以做三件事
     * 1，發射下一個元素，這個元素可以是任何東西。數組，事件，變量。。。
     * 2.流可以抛一個異常
     * 3.發射一個信号告訴觀察者流已經結束
     * Observable來自于rxjs包，這是JavaScript的一個響應式程式設計的包
     *
     */
    //Observable是被觀察的，被觀察者
    Observable.from([,,,])//from方法用于建立一個流
      .filter(e=>e%==)//把偶數過濾出來
      .map(e=>e*e)//計算數字的平方
      .subscribe(//訂閱這個流，接受并處理流中的對象。subscribe括号中的組合起來其觀察者
        e=>console.log(e),//列印出這個流
        err=>console.error(err),//如果出錯的話，列印出錯誤資訊
        ()=>console.log("結束了")//結束之後執行這句話

      )

    /**
     * 相應的對于觀察者可以定義三個方法來處理這三件事
     * 第一個方法處理流中發出的元素
     * 第二個方法處理流抛出的異常
     * 第三個方法在流結束的時候被調用
     * 後兩個方法是可選的
     */
  }
           

在浏覽器中産生的每一個事件，在JavaScript中都會被封裝成event對象

<input (keyup)="onKey($event)">
           

angular既可以處理标準的事件比如keyup，也可以建立和發射自定義的事件

一個事件的處理方法可以傳遞一個可選的$event參數來引用這個事件對象

如果一個事件對象是一個标準的DOM事件，那就可以調用這個事件對象的相關屬性和方法來擷取資訊，比如

//擷取使用者的輸入資訊
 onKey(event){
    console.log(event.target.value);
 }
           

event的target屬性指向發射事件的那個HTML元素，這裡也就是input

還有一種模闆本地變量的方式來可以來獲得元素的相關資訊

//myField就代表這個input标簽
<input #myField (keyup)="onKey(myField.value)">
           

onKey(value:string){
    console.log(value);
 }
           

在傳統的JavaScript中事件作為一次性的東西。觸發一次，就調用一下。

但在Angular中事件作為一個永不結束的流來處理。

案例：現在有個搜素框，我輸入東西後就開始進行搜尋。我想搜尋IBM，當我輸入I的時候就會觸發keyup事件去伺服器搜尋，當我輸入IB的時候也會去伺服器搜尋。這不是我們想要的。我們想輸入完IBM後去搜尋。這裡可以設定一個時間間隔，在這個時間間隔内沒有再輸入東西的時候就去伺服器搜尋。這個功能用傳統的JavaScript實作起來比較麻煩。

現在用響應式程式設計的方式來實作。

修改app.module.ts，添加

import{FormsModule,ReactiveFormsModule} from '@angular/forms'

imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
           

export class BindComponent implements OnInit {

  searchInput:FormControl =new FormControl();

  constructor() {
    this.searchInput.valueChanges
      .subscribe(stockCode=>this.getStockInfo(stockCode));//stockCode就是使用者輸入的值

  }

  getStockInfo(value:string){
    console.log(value);
  }

  ngOnInit() {
  }

}
           

當搜尋框中的值改變時，就會在控制台列印出來。

import {Component, OnInit} from '@angular/core';
import {Observable} from "rxjs";
import{FormControl} from '@angular/forms'
import 'rxjs/Rx'

@Component({
  selector: 'app-bind',
  templateUrl: './bind.component.html',
  styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {

  searchInput:FormControl =new FormControl();

  constructor() {
    this.searchInput.valueChanges
      .debounceTime()//設定為500毫秒
      .subscribe(stockCode=>this.getStockInfo(stockCode));

  }

  getStockInfo(value:string){
    console.log(value);
  }

  ngOnInit() {
  }

}
           

這樣當輸入字元後不會馬上去列印，而是會在500毫秒内沒有再輸入新東西時才會去列印。

萬物都可以用流來處理。