角等待初始加載

在我的角度項目中，我有以下設置：角等待初始加載

我有API的應用程序負載的開頭來從服務器的一些數據：

ItemFetch.ts

在應用程序加載開始時，它從API中提取數據，然後將itemLoaded更改爲true。

import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

... 
dataLoaded: boolean = false; 

dataAPI(){ //Stores in local storage 
... 
    .then(data=>{ 
    this.itemLoaded = true; 
    })  
... 
}

main.ts：

然後，一旦數據被存儲，我只需要加載存儲數據時itemLoaded從ItemFetch.ts是真實的。

import { dataFromStorage} from './data_from_storage' //local storage 

export class main_page {   

constructor(public itemStorage: dataFromStorage){}; 

ngOnInit(){ 
    this.fetchInitialData(); 
} 
    //Fetch the data from the storage 
    fetchInitialData(){ 
    this.itemStorage.GetItemDataFromStorage('some_item_id') 
     .then((data) => { 
      console.log("Got the data!" + data); 
    ) 
    }; 

}

問：

我如何從一個組件共享此dataLoaded到另一個，這樣我可以啓動this.fetchInitialData();只有當dataLoaded是真的嗎？

來源

2017-08-12 steve Kim

我會將變量存儲在單例服務中。這樣，兩個組件都可以注入服務並使用它。 – LLai

每當你發現自己在想：「我需要代碼才能運行，但只有在X發生後」，你基本上需要一個事件處理程序。在Angular中，最簡單的方法就是使用RxJS Observables。

有全權負責通知所有感興趣的聽衆數據已到達的服務。

export class LoadNotifierService{ 
    public dataLoaded : ReplaySubject<any> = new ReplaySubject(); 
}

在AppModule.providers陣列提供這項服務，並在加載數據的組件注入的服務，並在需要了解的所有組件加載完成。

itemFetch：獲取數據，然後引發事件

// .next() will cause the ReplaySubject to emit TRUE 
loadData().then(e => this.loadNotifier.dataLoaded.next(true));

主要：註冊事件處理通知當數據到達

ngOnInit(){ 
    // Subscribe will receive notice when the ReplaySubject emits 
    // .take(1) guarantees that this will be run only once per ngOnInit() 
    this.loadNotifier.dataLoaded.take(1).subscribe(e => this.fetchInitialData()) 
}

您可能需要修復幾個錯誤（我沒有運行代碼），但你得到了我希望的邏輯。

來源

2017-08-12 04:54:14 BeetleJuice

謝謝你的回答。我明白你的答案，非常感謝。只是一個簡單的問題。 'ReplaySubject = new ReplaySubject（）;''做？謝謝！ –

它將'dataLoaded'定義爲'ReplaySubject'類型。它是一個對象，通過'ReplaySubject.next（）'可以很容易地通知監聽器何時發生重大事件。它還可以輕鬆地使用'ReplaySubject.subscribe（）'' – BeetleJuice

來收聽這些通知。謝謝！非常感激！ =） –

角等待初始加載

回答

相關問題