通過Angular 2/Ionic 2中的構造函數刷新數據

Question

我有3個不同數據集的Ionic 2應用程序和一個視圖。數據在構造函數中加載，並基於頁面參數中的變量，決定顯示哪個數據集。

在observable每次成功的數據調用時，加載數據時事件處理程序都會記錄成功。但這隻適用於我第一次點擊/加載視圖。如果我點擊第二或任何其他時間，數據不會重新加載（無日誌）。此外，當我只是控制檯登錄任何東西時，它不會在第二次點擊時顯示。

所以我不知道什麼我應該改變每次加載數據和構造函數如何以這種方式工作。

這就是我的代碼的樣子。 Jsons從namesListProvider中調用。

@Component({ 
    templateUrl: '...', 
}) 
export class ListOfNames { 

    ... 
    private dataListAll: Array<any> = []; 
    private dataListFavourites: Array<any> = []; 
    private dataListDisliked: Array<any> = []; 


constructor(private nav: NavController, ...) { 

    ... 
    this.loadJsons(); 
    console.log('whatever'); 
    } 

    loadJsons(){ 
    this.namesListProvider.getJsons() 
    .subscribe(
     (data:any) => { 
     this.dataListFavourites = data[0], 
     this.dataListDisliked = data[1], 
     this.dataListAll = data[2] 

     if (this.actualList === 'mainList') { 
      this.listOfNames = this.dataListAll; 
      this.swipeLeftList = this.dataListDisliked; 
      this.swipeRightList = this.dataListFavourites; 
     } 
     else if (...) { 
      ... 
     } 
     this.listSearchResults = this.listOfNames; 


     }, err => console.log('hey, error when loading names list - ' + err), 
    () => console.info('loading Jsons complete')  
    ) 

    } 

Answer 1

你在找什麼從Ionic2頁面Lifecycle events。因此，而不是使用ngOnInit你可以使用一些Ionic2公開事件：

Page Event  Description 
----------  ----------- 
ionViewLoaded  Runs when the page has loaded. This event only happens once per page being created and added to the DOM. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The ionViewLoaded event is good place to put your setup code for the page. 
ionViewWillEnter Runs when the page is about to enter and become the active page. 
ionViewDidEnter Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page. 
ionViewWillLeave Runs when the page is about to leave and no longer be the active page. 
ionViewDidLeave Runs when the page has finished leaving and is no longer the active page. 
ionViewWillUnload Runs when the page is about to be destroyed and have its elements removed. 
ionViewDidUnload Runs after the page has been destroyed and its elements have been removed. 

在你的情況，你可以使用這樣的ionViewWillEnter頁面事件：

ionViewWillEnter { 
    // This will be executed every time the page is shown ... 
    this.loadJsons(); 
    // ... 
} 

---

編輯

如果您要獲取要在該頁面中異步顯示的數據，因爲您不知道需要多長時間數據已準備就緒，我建議您使用loading popup，這樣用戶就可以知道發生在後臺的事情（而不是在加載數據之前顯示空白頁面幾秒鐘）。您可以輕鬆地將此行爲添加到代碼中，如下所示：

// Import the LoadingController 
import { LoadingController, ...} from 'ionic/angular'; 

@Component({ 
    templateUrl: '...', 
}) 
export class ListOfNames { 

    ... 
    private dataListAll: Array<any> = []; 
    private dataListFavourites: Array<any> = []; 
    private dataListDisliked: Array<any> = []; 

    // Create a property to be able to create it and dismiss it from different methods of the class 
    private loading: any; 


    constructor(private loadingCtrl: LoadingController, private nav: NavController, ...) { 

    ... 
    this.loadJsons(); 
    console.log('whatever'); 
    } 

    ionViewWillEnter { 
    // This will be executed every time the page is shown ... 

    // Create the loading popup 
    this.loading = this.loadingCtrl.create({ 
     content: 'Loading...' 
    }); 

    // Show the popup 
    this.loading.present(); 

    // Get the data 
    this.loadJsons(); 

    // ... 
    } 

    loadJsons(){ 
    this.namesListProvider.getJsons() 
    .subscribe(
     (data:any) => { 
     this.dataListFavourites = data[0], 
     this.dataListDisliked = data[1], 
     this.dataListAll = data[2] 

     if (this.actualList === 'mainList') { 
      this.listOfNames = this.dataListAll; 
      this.swipeLeftList = this.dataListDisliked; 
      this.swipeRightList = this.dataListFavourites; 
     } 
     else if (...) { 
      ... 
     } 
     this.listSearchResults = this.listOfNames; 

     }, err => console.log('hey, error when loading names list - ' + err), 
    () => { 

     // Dismiss the popup because data is ready 
     this.loading.dismiss(); 

     console.info('loading Jsons complete')} 
    ) 

    } 

Answer 2

即時從角2世界，而不是離子的，但角2未來具有登記在初始化/ destory回調（ngInit/ngDestory）的選項。 嘗試將初始化移動到ngInit，保存訂閱處理程序，並且不要忘記在destory上取消訂閱它。 我認爲你的問題涉及到你不退訂。：\

Answer 3

解決方法是不要在構造函數中執行此操作，請改爲使用ngOnInit()。組件只創建一次，因此構造函數只會在第一次創建時被調用。

你的組件類必須實現OnInit接口：

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    templateUrl: '...', 
}) 
export class ListOfNames implements OnInit { 
    constructor(...) 

    ngOnInit() { 
     this.loadJsons(); 
    } 

    private loadJsons() { 
     ... 
    } 
}