离子2装载机没有在正确的时间显示

Question

  

我在Ionic 2应用程序中使用装载程序。最初，我有一个像这样的菜单网格 -

  

当我点击任何菜单时，它会导航我到下一页。但由于下一页有大量数据，因此需要花时间加载下一页。所以，我想在点击菜单后立即显示一个装载机。

     

我目前正在使用加载程序，但它显示在打开的下一页上，也就是说，我没有在点击菜单后立即看到加载程序，而是在加载下一页后。

     

我的代码如下 -

homepage.html（网格代码）

<ion-content>
    <ion-grid>
        <ion-row wrap>
            <ion-col ion-card width-33 *ngFor="let menuItem of menuData" (tap)="itemTapped($event, menuItem)">
                <ion-card text-center>
                <ion-icon [name]="menuItem.category_icon" class="menuIcon"></ion-icon>/
                    <p>{{menuItem.category_name}}</p>
                </ion-card>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

homepage.ts

itemTapped(event, menuItem) {
    this.loading = this.loadingCtrl.create({
        content: 'कृपया प्रतीक्षा करा...',
        spinner: 'bubbles',
        dismissOnPageChange: true
    });
    this.loading.present();
    this.page2Data = [];
    this.commonData.selectMenu(menuItem.category_name);
    switch (menuItem.category_name) {
        case 'क्लासेस':
        this.loadClasses(menuItem);
        break;

        case 'मोबाईल व इले.':
        this.loadElectronics(menuItem);
        break;

        .....
    }
}

  

所以，我想要的是在主页上显示加载器（点击菜单后），而不是在下一页上。因为目前导航到下一页需要大约2秒钟。

Answer 1

您可以尝试在加载器承诺解决后加载您的内容。

this.loading.present().then(() => {
   // Your logic to load content
 });