angular – Ionic 3如何确保在加载视图之前获取db数据

ngOnit() {
storage.get('token').then((val) => {
    Make api call here 
});
}

getToken() {
    return Promise((resolve,reject)=>{
       #if fetched once save in local var and resolve token  
       #or fetch from DB and resolve token  
    })
}

// On Component
this.sharedservice.getToken().then((token)=>{
  //Make api call
}

我已经以这种方式实现了上述用例.

我已经为CRUD创建了Apiservice,如下所示.该代码不言自明,如果您需要更多信息,请告诉我们.

API-service.ts

import { Injectable,} from '@angular/core';
import { http,Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Headers,requestOptions,BaserequestOptions } from '@angular/http';
import { Storage } from '@ionic/storage';
import { Events } from 'ionic-angular';

@Injectable()
export class Apiservice {

    constructor(private http: http,private storage: Storage,private events: Events) { }

    createHeader(headers: Headers) {
        return new Promise((resolve,reject) => {
            this.storage.get('loggedInUser')
                .then((token: any) => {
                    if (token) headers.append('Authorization','token ' + token.token);
                    resolve(headers);
                },err => {
                    resolve(headers);
                });
        });
    }

    get(api) {
        let header = new Headers();
        return Observable.fromPromise(this.createHeader(header))
            .map(() => {
                let options = new BaserequestOptions();
                options.withCredentials = true;
                options.headers = header;
                return options
            })
            .switchMap((options) => this.http.get(api,options))
            .catch((err: Error | ResponsE) => {
                if (err instanceof Response && err.status === 401) {
                    this.events.publish('token-expiration');
                }
                return Observable.throw(err);
            });
    }

    post(url,params): Observable<any> {
        return new Observable(observer => {
            let header = new Headers();
            this.createHeader(header)
                .then(() => {
                    let options = new requestOptions({ headers: header });
                    this.http.post(url,params,options)
                        .subscribe(response => {
                            observer.next(responsE);
                            observer.complete();
                        },(E) => {
                            observer.error(E);
                        });
                })
        })
    }

    delete(url) {
        return new Observable(observer => {
            let header = new Headers();
            this.createHeader(header)
                .then(() => {
                    return this.http.delete(url,{ headers: header,withCredentials: true })
                        .subscribe(response => {
                            observer.next(responsE);
                            observer.complete();
                        });
                })
        });
    }

}

在这里,我在用户登录app时创建了loggedInUser存储.它也是一个提供者,如下所示.

社会login.ts

import { Injectable } from '@angular/core';
import { Apiservice } from "../providers";
import { LocalCacheserviceProvider } from "../local-cache-service/local-cache-service";
import { Userservice } from "../user-provider";
import { Storage } from '@ionic/storage';


@Injectable()
export class SocialLoginProvider {

  constructor(private apiservice: Apiservice,private localCacheservice: LocalCacheserviceProvider,private userservice: Userservice,private storage: StoragE) {
  }

  //login To App
  loginToApp(url: String,data: String) {
    this.apiservice.post(url,{ access_token: data })
      .map((res: any) => res.json())
      .subscribe(res => {
        this.setUserLocally(res);
      });
  }

  //set User Locally
  setUserLocally(user) {
    this.localCacheservice.clearAllKeys().then(() => {
      thiS.Userservice.setLoggedInUser(user);
      this.storage.set('loggedInUser',user);
    });
  }
}

之后,我可以通过我的任何提供程序(用于CRUD操作)使用上述服务(即ApiservicE),如下所示.

这是Articleservice.

文章-service.ts

import { Injectable } from '@angular/core';
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/map';
import { config } from '../config/config';
import { Apiservice } from './api-service';


@Injectable()
export class Articleservice {

    constructor(private apiservice: ApiservicE) {
    }

   getBookById(id) {
        return this.apiservice.get(`${Config.getBookByID}${iD}/`).map((res: any) => res.json());
    }  
}

以上方法对我来说非常好.希望这种方法对你也有帮助.如果你需要更多帮助,请告诉我.