【问题标题】:loading animation until data is loaded in Typescript (ionic)加载动画,直到数据加载到 Typescript (ionic)
【发布时间】:2018-10-17 12:11:07
【问题描述】:

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

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,这是最坏情况的解决方案。有什么好办法解决吗?

【问题讨论】:

    标签: typescript ionic-framework loading-animation


    【解决方案1】:

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

    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/

    【讨论】:

      【解决方案2】:

      类似的替代方案,使用 asyncawait

      async loadProjects() {
          // start loader:
          let loading = this.loadingCtrl.create({
              content: 'Please wait...'
          });
      
          try {
              await loading.present();
              this.projs = await this.network.getAllProjects();
          }
          catch (error) {
              //TODO: Log the error, show a friendly message
              this.logout();
          }
          finally {
              loading && loading.dismiss();
          }
      }
      

      【讨论】:

        猜你喜欢
        • 2021-07-25
        • 1970-01-01
        • 2013-04-16
        • 2011-04-10
        • 2016-03-23
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-11-07
        相关资源
        最近更新 更多