使用Angular與TypeScript構建Electron應用(六)

這一小節咱們只作幾件小事，它們在項目總體中顯得微不足道。特別是new-feed中，咱們並無設計出完善的業務邏輯，如今咱們甚至能夠結束教程，但我但願可以藉助這幾個項目中細節實現來傳達總體的構建思想與編程思惟方式，若是你認爲學習它有些困難，能夠跳過這些方法轉而使用一些不太優雅的解決方案。

news-feed現在還不能正確的瀏覽文章，至少缺乏返回列表與列表翻頁。Angular中它們有不少徹底不一樣的解決方案，你須要爭對不一樣場景選擇合理的實現方式，下文裏咱們嘗試幾種不一樣的方案來解決這些問題。

實現返回按鈕

組件方式

文章在詳情瀏覽時須要一個返回至列表頁的按鈕，它僅僅只作路由上的回退，換言之，這個按鈕無需接受任何的參數，也不會受環境變化影響。返回按鈕始終是一個固定的功能組件，咱們先使用組件的方式完成它：

1. 在src/app/shared裏新建component文件夾並建立back組件。

2. 爲組件添加html模板與樣式。

3. 爲組件添加邏輯。

4. 將back組件連接至shared.module.ts中，並導出它。

import {Component, OnInit} from '@angular/core'
import {Location} from '@angular/common'

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

    constructor (
        private location: Location
    ){}

    goBack ():void{
        this.location.back()
    }

    ngOnInit (){
    }

}

如今back組件已經可以正常工做，但還須要注意一個小問題，在快速點擊按鈕時可能觸發屢次的goBack ()致使路由返回到上一層或登陸頁，咱們須要用一些小技巧來解決它：

1. 命名一個具有閥門功能的布爾變量(private returnOnlyOnce: boolean = true)，每次執行函數時設置一次變量。這是一個不錯的實現方式。

2. 或者你能夠嘗試在goBack ()函數中傳入一個事件對象，而後利用Rx的fromEvent來將事件轉化爲Observable，訂閱Observable時咱們僅僅須要使用動態操做符便可屏蔽連續的點擊事件。

指令方式

back組件是共享的，它可以在任何須要的地方被引入使用，但這又引伸出一個值得注意的問題：每當咱們須要改動back組件的樣式時，就不得不爲組件嵌套一層模板或加入一些新的接口，隨着業務愈來愈複雜，back組件會俞加臃腫，直到有一天，它看起來和React組件同樣渾身被打滿屬性瘡口。很明顯，這不是咱們指望的結果。

簡單的說，你僅僅只須要作一些邏輯/屬性上的改變而模板不會屢次複用時，你須要儘可能避免組件，轉而使用屬性型指令，這是Angular與React的不一樣之處。
在介紹屬性型指令以前，咱們先看看React最明顯的問題：在構建一個模板與樣式會變化的組件時，React老是須要傳達屬性或style，這樣的代碼不少時候會顯得臃腫並且富含黏性。簡單的說，它是基於view思考問題的。在Angular中遇到相似問題時咱們首先要作的並不是建立組件，轉而考慮改變dom的行爲，從邏輯上來講，這是行得通並且很是具備形象意義的。

開始建立back指令：

import {Directive, HostListener} from '@angular/core'
import {Location} from '@angular/common'

@Directive({
    selector: '[routeBack]'
})
export class BackDirective {

    constructor (
        private location: Location
    ){
    }

    @HostListener('click')
    goBack (){
        this.location.back()
    }

}

@HostListener裝飾器能夠標註DOM宿主的動做，它避免咱們直接操做DOM元素(若是你想，固然也能夠)，在編寫Angular代碼的大部分時間，咱們都沒必要考慮DOM的問題，也不多直接參與DOM事件的註銷。
如今，只須要將指令文件導入至src/app/shared中並導出，咱們就能夠在任何的模板中輕鬆使用它：

<div routeBack>返回</div>

這是一個不錯的開始，讓咱們體會到Angular的不一樣尋常之處，如今開始編寫相對複雜一些的加載列表按鈕。

實現加載列表

使用變量控制

在相似於計數器、時間控制、購物車等等業務邏輯之處，你均可以經過暫存一個變量來解決數量的緩存與顯示，全部的操做邏輯被看做Action，用來觸發緩存的變化。它們實現起來很是簡單，特別是只須要加載更多的單一翻頁功能時：

1. 建立一個接口用來繼承或聲明屬性：interface Pagination {page: number}

2. 建立變量 pagination，初始值爲1

3. 爲點擊事件綁定函數loadMore ()，並在其中發起一次service文件中的getList，並使變量 pagination+1。

這裏的Pagination接口很是簡陋，但實際業務中確定遠遠不止這些。翻頁須要考慮到一共有多少頁碼數量，在最後一頁時須要對下一頁或加載更多隱藏，返回上一頁時也須要請求接口，因爲列表使用的服務是公共的getList，你可能還要集齊每頁數量、排序方式、篩選條件、搜索條件等等參數，每個參數發聲變化時都須要重複計算整個邏輯，並從新請求一次接口，固然還須要對這些參數進行保存，以便於下一頁繼續使用。
它們太複雜了，特別像電商網站這樣的複雜的篩選參數時，你須要爲此付出巨大精力，並且代碼也未必有足夠的擴展性，甚至於其餘開發人員也很難理解。面對這類功能時，咱們能夠嘗試使用一次rxjs。

經過可觀察對象

在使用rxjs以前，有一點值得咱們關注：在實現翻頁功能時，咱們須要訂閱的並不是是來自於翻頁按鈕的事件，而使基於頁碼自己的Observable。頁面中可能有多個位置會觸發翻頁函數，但操做的始終只是隨着時間推動而變化的單個值。即使是在將來，咱們須要關注也只是一個稍稍複雜的對象而已。

private pagination:Subject<number> = new Subject<number>()
private paginationSub: Subscription
this.paginationSub = this.pagination
            .filter(page => page > 0)
            .switchMap(page => this.listService.getList(page))
            .subscribe(
                list => this.list.push(...list),
                err => Observable.of<any>([])
            )

Subject是rxjs中一種特殊的Observable，它容許值被多播到多個觀察者。咱們能夠經過調用this.pagination.next(1)爲觀察者發射一個新的值，那麼它的觀察者會再次執行filter與switch直處處理訂閱函數。代碼中的filter用來幫助驗證和過濾一些不合理的值，它在將來會有其餘用處，經過switchMap切換至新的流並取消原來流的訂閱。最後咱們訂閱的是listService返回的流，並將數據更新至list中。

在將來業務邏輯變化的更復雜時，咱們能夠爲這些列表篩選與排序產生的值建立多個可觀察對象，再使用combineLatest將它們合併起來：

this.paginationSub = Observable.combineLatest(
     this.pagination,
      this.sort,
      this.filter,
            // ...
    )

不管邏輯怎樣複雜，咱們始終僅僅只維護這些可觀察對象，在合理的時間爲它們發射新的值便可。理所應當的，任何過濾，驗證操做均可以使用rxjs的操做符完成，甚至你能夠本身建立一些操做符來過濾、合併這些流。相比於前一種實現方式，rxjs使代碼具有了高度可讀性與可擴展性，這是難能難得的。

不知道你是否注意到，這段代碼還存在一個問題，若是咱們須要對this.pagination進行維護，若是你不可以從http服務返回的流中獲取這個值就須要本身維護所謂的當前值。這類狀況下咱們更須要Subject的一個變種BehaviorSubject。BehaviorSubject儲存着最新發射的值，能夠經過getValue()獲取：

private pagination: BehaviorSubject<number> = new BehaviorSubject<number>(1)

// ...

loadMore (nextNumber: number):void{
      this.pagination.next(this.pagination.getValue() + nextNumber)
}

對於排序、篩選或其餘任何邏輯都是相同的，將來咱們永遠只把注意力放在可觀察對象上，經過少許的高可讀性的代碼來解決邏輯問題。對於剛剛解除Angular或Rxjs的開發者來講，這須要一些學習時間，可參考 github記錄理解這一節。在下一小節中，我將會默認你們已經掌握這些技能，開始着手完成剩餘的用戶模塊。