具有最后一个值的Angular2 EventEmitter

时间:2016-07-07 11:53:07

标签: typescript angular rxjs eventemitter

基本上我想知道有没有办法在订阅后立即从EventEmmiter获取最后一个值?

为什么我需要这个。想象一下列表组件使用另外两个组件:过滤器和网格。过滤器提供filter事件,网格提供sorting事件。

在我的列表组件中,我想编写如下代码:

        Observable
            .combineLatest(filtering$, sorting$)
            .switchMap(([filter, sorting]) => {
                return this.api.list(filter, sorting);
            })
            ...

非常简短优雅的代码。但有两个问题:

  1. EventEmitter is not observable。这不是什么大问题,因为我可以用observable轻松地包装它。
  2. 在每个可观察者至少发射一次之前,不会执行对API的调用。这是一个真正的问题。
  3. 目前我正在使用来自RxJs的BehaviorSubject来解决它:

      

    表示随时间变化的值。观察者可以订阅主题以接收最后(或初始)值以及所有后续通知。

    在我的过滤器组件中,我有:

    class UsersListFilter {
        private filteringSource = new BehaviorSubject<UserFilter>(new UserFilter());
        filtering$ = this.filteringSource.asObservable();
    
        ...
    }
    

    在我的列表组件中:

    class UsersList {
        @ViewChild(UsersListFilter) private filter: UsersListFilter;
        ...
    
        setupDataReloading() {
            Observable
                .combineLatest(this.filter.filtering$, this.grid.sorting$)
                ...
        }
    }
    

    如您所见,我根本不使用EventEmitter。但是这个解决方案在Angular2中感觉有点不自然,因为我忽略了与子组件交互的标准方式(@Output)。

    有什么想法吗?

1 个答案:

答案 0 :(得分:0)

改为使用此自定义类

import { EventEmitter } from '@angular/core';

import { ObjectUnsubscribedError } from 'rxjs';


export class CustomEventEmitter<T> extends EventEmitter<T> {

    private _value: T;

    constructor() {
        super();
    }

    get value(): T {
        return this.getValue();
    }

    getValue(): T {
        if (this.hasError) {
            throw this.thrownError;
        } else if (this.closed) {
            throw new ObjectUnsubscribedError();
        } else {
            return this._value;
        }
    }

    emit(value?: T) {
        super.emit(this._value = value);
    }
}