使用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记录理解这一节。在下一小节中，我将会默认你们已经掌握这些技能，开始着手完成剩余的用户模块。