Question

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

我遇到的问题是，其中一些组件可能需要来自服务器的数据，这些数据都加载在组件的$ onInit函数中。由于这些数据是异步检索的（并且可能存在延迟），因此结果是组件在页面中一个接一个地出现（取决于每个组件何时设置为初始化），而不是＃＆＃ 34;天然＆＃34;移动体验。我想要做的是找到一种方法来了解所有组件何时完成加载，这样我才能在它真正准备就绪后显示页面（所有组件都完全呈现）。

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

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

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

Answer 1

您可以尝试在ui.router或ngRoute中使用resolve：

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); 
              }
         }
    }
}]);

解决方法将在加载控制器之前获取数据并解决承诺。

这是一种意识形态。

＆＃34;同步＆＃34;在页面中加载组件

1 个答案: