「同步」頁面中組件的加載

我有一個Ionic 1.3移動應用程序，我在其中使用Angular 1.5。每個頁面由一個或多個Angular組件組成，每個這些組件都可以包含其他組件，從而在頁面內創建一個組件樹。「同步」頁面中組件的加載

我遇到的問題是這些組件中的某些組件可能需要來自服務器的數據，這些數據將在組件的$ onInit函數中加載。由於此數據是異步檢索的（並且可能存在延遲），因此結果是組件在頁面中依次出現（取決於每個組件何時設法初始化），這不會構成非常「本地」的移動設備經驗。我想要做的是找到一種方法來知道什麼時候所有組件都加載完畢，以便我可以在真正準備好所有組件後才能顯示頁面（所有組件都已完全呈現）。

我最初的想法是在控制器初始化時向服務「註冊」每個組件，然後在數據加載完成後通知服務組件已準備就緒。然後該服務可以負責在所有組件準備就緒時顯示該頁面。這樣做的問題是，組件似乎是按順序初始化的（即，組件1的控制器初始化，然後執行$ onInit，然後組件2的控制器初始化並執行$ onInit等），這意味着我的服務不能真正知道它有多少組件正在等待。不僅如此，組件的子控制器初始化和它們的$ onInit方法在父組件完成初始化後執行，這意味着該組件也不能跟蹤子組件是否已初始化。

另一種方法是對頁面某處的組件數量進行硬編碼，並通過頁面控制器將其傳遞給服務，以便知道有多少組件需要等待，而組件不需要自行註冊，但理想情況下我想要一些更易於維護的東西（即不需要我跟蹤組件並保持最新數據的東西）。

任何人都可以想到任何其他方式，我可以跟蹤我的網頁準備好使用Angular還是Ionic？理想情況下，它也可以移植到Angular2/Ionic2上，因爲我希望應用程序在某個時候升級，但任何建議都是值得歡迎的。

來源

2016-08-04 Christina

你可以嘗試在ui.router或ngRoute使用決心：

angular.module('app', ['ui.router']) 
    .config(['$stateProvider', function($stateProvider)  { 
    $stateProvider.state('mainstate', { 
     url: 'your-url' 
     ,templateUrl: 'yout_template.html' 
     ,controller: 'YourController' 
     ,resolve: { 
       yourFirstData: ['serviceDeps', function(serviceDeps){ 
        return serviceDeps.getFirstData(); 
       }] 
       ,yourSecondData: ['serviceDeps', 'yourFistData', function(serviceDeps, yourSecondData){ 
        return serviceDeps.getSecondData(yourFirstData); 
       } 
     } 
    } 
}]);

的決心，將得到的數據，並載入控制器之前解決的承諾。

這是一個理想。

來源

2016-08-04 16:20:13

感謝您的建議，但在我的情況下，這是行不通的，因爲構建應用程序的方式在構建時（通過某些配置邏輯）將組件添加到頁面中，因此無法準確知道哪些組件將放在每個頁面中以便在UI路由器的解析中考慮其數據。 – Christina

「同步」頁面中組件的加載

回答

相關問題