簡體   English   中英

具有最后一個值的 Angular2 EventEmitter

[英]Angular2 EventEmitter with last value

基本上我想知道有沒有辦法在我訂閱EventEmmiter后立即從EventEmmiter獲取最后一個值?

為什么我需要這個。 想象一個列表組件,它使用了另外兩個組件:過濾器和網格。 Filter 提供filter事件,grid 提供sorting事件。

在我的列表組件中,我想編寫這樣的代碼:

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

非常簡短的優雅代碼。 但是有兩個問題:

  1. EventEmitter是不可觀察的 這不是什么大問題,因為我可以很容易地用 observable 包裝它。
  2. 在每個 observable 至少觸發一次之前,不會執行對 API 的調用。 這是一個真正的問題。

目前我正在使用 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 )交互的標准方式。

有什么想法嗎?

改用這個自定義類

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);
    }
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM