“同步”页面中组件的加载

Question

我有一个Ionic 1.3移动应用程序，我在其中使用Angular 1.5。每个页面由一个或多个Angular组件组成，每个这些组件都可以包含其他组件，从而在页面内创建一个组件树。

我遇到的问题是这些组件中的某些组件可能需要来自服务器的数据，这些数据将在组件的$ onInit函数中加载。由于此数据是异步检索的（并且可能存在延迟），因此结果是组件在页面中依次出现（取决于每个组件何时设法初始化），这不会构成非常“本地”的移动设备经验。我想要做的是找到一种方法来知道什么时候所有组件都加载完毕，以便我可以在真正准备好所有组件后才能显示页面（所有组件都已完全呈现）。

我最初的想法是在控制器初始化时向服务“注册”每个组件，然后在数据加载完成后通知服务组件已准备就绪。然后该服务可以负责在所有组件准备就绪时显示该页面。这样做的问题是，组件似乎是按顺序初始化的（即，组件1的控制器初始化，然后执行$ onInit，然后组件2的控制器初始化并执行$ onInit等），这意味着我的服务不能真正知道它有多少组件正在等待。不仅如此，组件的子控制器初始化和它们的$ onInit方法在父组件完成初始化后执行，这意味着该组件也不能跟踪子组件是否已初始化。

另一种方法是对页面某处的组件数量进行硬编码，并通过页面控制器将其传递给服务，以便知道有多少组件需要等待，而组件不需要自行注册，但理想情况下我想要一些更易于维护的东西（即不需要我跟踪组件并保持最新数据的东西）。

任何人都可以想到任何其他方式，我可以跟踪我的网页准备好使用Angular还是Ionic？理想情况下，它也可以移植到Angular2/Ionic2上，因为我希望应用程序在某个时候升级，但任何建议都是值得欢迎的。

Answer 1

你可以尝试在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); 
       } 
     } 
    } 
}]); 

的决心，将得到的数据，并载入控制器之前解决的承诺。

这是一个理想。