时间戳

首页 > 解决方案 > 加载动画，直到数据加载到 Typescript (ionic)

typescript - 加载动画，直到数据加载到 Typescript (ionic)

问题描述

我想在项目加载之前向屏幕添加动画。

constructor(
        public platform: Platform,
        private network: NetworkService,
        public navContrl: NavController,
        public modalCtrl: ModalController
    ) {
        this.loadProjects();

        this.admin = this.network.isUserAdmin();
    }

loadProjects() {
        this.network.getAllProjects()
            .then(projects => this.projs = projects)
            .catch(err => this.logout());
    }

我的第一个想法是实现一个 settimeout，这是最坏的解决方案。有没有解决这个问题的好方法？

标签： typescriptionic-frameworkloading-animation

解决方案

您需要导入加载器并根据您的异步代码使用它：

import { LoadingController, ModalController, Platform } from "ionic-angular";
// add your further imports here...

constructor(
        public platform: Platform,
        private network: NetworkService,
        public navContrl: NavController,
        public modalCtrl: ModalController,
        // inject it:
        public loadingCtrl: LoadingController
    ) {
        this.loadProjects();
        this.admin = this.network.isUserAdmin();
    }

loadProjects() {
        // start loader:
        let loading = this.loadingCtrl.create({
            content: 'Please wait...'
        });
        loading.present();
        this.network.getAllProjects()
            .then((projects) => {
                this.projs = projects;
                loading.dismiss();
             })
            .catch(err => this.logout());
    }

不确定您是否在案例中发布了完整的代码示例。所以我希望这会有所帮助。在此处查看用法：https ://ionicframework.com/docs/api/components/loading/LoadingController/

推荐阅读