Rx當其他組件導致其數據更新並調用下一個時，Observable不會更新

在我的Angular2應用程序中，我有一個暴露於視圖的rx Observable。這observable創建在商店，並通過subject.asObservableRx當其他組件導致其數據更新並調用下一個時，Observable不會更新

我有一個問題，獲取頁的引用註冊next（）被調用的主題，如果一個子頁上的操作啓動該操作，但如果它是調用商店的同一頁面，它就可以很好地工作。

下面顯示了這個項目的佈局和流程，下面說明它在什麼情況下會失敗。

base.store，其容納受試者下（）調用

options: { collection: string }; 
    _subject$: Subject<Array<any>>; 
    protected dataStore: {}; 

    constructor(protected http: Http) { } 
    init(options) { 
    this.options = options; 
    this.dataStore = {}; 
    this.dataStore[options.collection] = []; 
    this._subject$ = <Subject<Array<any>>>new Subject(); 
    this.load(); 
    } 

    load() { 
    this.http.get(endpointurl).map(response => response.json()).subscribe(
     data => { 
     this.dataStore[this.options.collection] = data; 
     this._subject$.next(this.dataStore[this.options.collection]); 
     }), 
     err => console.log("Error load", err)); 
    } 

    addEntity(entity: any) { 
    this.http.post(endpointurl, entity).subscribe(
     data => this.load(), 
     err => console.log("Error addEntity", err)); 
    }

contacts.store，它公開的主題asObservable

export class ContactStore extends BaseStore { 

    protected _subject$: Subject<Array<Contact>>; 
    options; 

    constructor(protected http: Http) { 
    super(http); 

    this.options = { collection: "contacts" }; 
    this.init(this.options); 
    } 

    get contacts$() { 
    return this._subject$.asObservable(); 
    } 

    addOrUpdateContact(contact: Contact) { 
    if(contact._id) this.updateEntity(contact); 
    else this.addEntity(contact); 
    }

觸點.component，它消耗可觀察的並且顯示該列表

public contacts$: Observable<Array<Contact>>; 

    constructor(private contactsStore: ContactStore) { 
    this.contacts$ = this.contactsStore.contacts$; 
    }

contacts.view，顯示聯繫人

<ion-item *ngFor="let contact of contacts$ | async">{{contact.name}}</ion-item>

現在來說明這個問題，我使用的代碼，添加新聯繫人以下行; this.contactsStore.addOrUpdateContact(contact);

如果我添加聯繫人，同時contact.view是積極的，認爲會立即更新，一切的偉大工程
如果我添加一個子頁面上的接觸（例如，contact.detail），當我返回到父視圖聯繫頁面不反映新添加的聯繫人
如果我回來了，然後再從該父頁面添加另一個聯繫人，視圖更新並顯示兩個新聯繫人！
如果我導航離開並返回到聯繫人視圖也將顯示新接觸

我連接企圖調試訂閱事件給這個項目隨處可見。我的發現似乎突出了這個問題。

contact.store中的訂閱總是捕獲添加併發布和更新。如果它是活動頁面，contact.component內的訂閱會執行此操作，但如果在處於不同組件中時發生添加操作，則不會。

我怎樣才能確保它能夠做到，或者一旦我返回頁面就會自動刷新？

因爲它看起來問題是由contacts.component中沒有發生的訂閱事件造成的，所以我嘗試用ngZone和applicationRef.tick手動觸發更新，但都沒有解決問題。

爲了幫助調試，我還在subject.next（）之後立即發出一個事件「contacts.loaded」。我在contacts.component上訂閱了該事件。即使在視圖不更新的情況下，它也會始終激活。我試圖把ChangeDetectorRef.detectChanges（）放到無效。

來源

2016-11-05 Joshua Ohana

你可以將這個問題解決到必要的最小值？ – martin

@Martin昨天晚上在調試時有點瘋狂，重新編寫了整個事情讓它更有意義，謝謝 –

我假設您不止一次提供服務。不要將它添加到@Component()的providers: []，而不是@NgModule()，那麼您只會爲整個應用程序獲取單個服務實例，否則您將爲每個組件實例獲取服務實例。

來源

2016-11-06 17:27:45

是的，你是對的，它在@Component的providers數組中。由於其他依賴關係，我無法將其拉到單身人士身上，但我會嘗試這條道路。謝謝 –

感謝解決了這個問題，但現在數據不會顯示在第一次加載的頁面上（儘管它已經存在），但它會顯示在我做了一些事情後 –

嘗試使用'BehaviorSubject'。它向最終用戶發出最後一個值。這解決了在用戶有機會訂閱之前發生事件時的問題。（只是猜測 - 不知道你的應用程序到底發生了什麼）。 –

Rx當其他組件導致其數據更新並調用下一個時，Observable不會更新

回答

相關問題