Ionic 2 loader 没有在正确的时间显示

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