Router Data Resolver / Loading Indicator from Angular 4? Can it be replicated in Ionic 3

问题

I've seen in Angular 4 you use a Router Data Resolver, and have a loading indicator, so you don't get flakey repainting of screen when all the data hasn't loaded.
See relevant partial code snippets below:
What is the Ionic 3 way of doing this?
I'm trying to use a Data Table from PrimeNg in my app, and the pagination tab first renders one then moments later switches to the first page load. So I'd like to do something akin to what I've seen in Angular...

app.module.ts

import {RouterModule} from '@angular/router';
import {routerConfig} from "./router.config";
@NgModule({
   imports: [
    RouterModule.forRoot(routerConfig)
  ]
})

router.config.ts

export const routerConfig: Routes = [
   path: 'test/:id'
   component: DataComponent
   resolve: {
     key: DataComponentResolver   }
];

data-component-resolver.ts

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class DataComponentResolver implements Resolve<[Data[]]> {

    constructor(private dataService: DataService) {

    }

    resolve(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<[Data[]]> {

        return this.dataService.findData(route.params['id']);

    }
}

data-component.ts

import {Component, OnInit} from '@angular/core';
@Component({
    selector: 'data',
    templateUrl: './data.component.html'
})
export class DataComponent implements OnInit{
$data: Observable<Data[]>;
constructor(private route:ActivatedRoute) {}
ngOnInit() {
this.data$ = this.route.data.map(data => data['key']); //from router.config.ts
}

loading-component.html

<div *NgIf="isLoading$ | async" class="load-ind">
<img src="./images/spinning-cog.gif"/>
</div>

loading-component.ts

export class LoadingComponent implements OnInit{
isLoading$: Observable<boolean>
constructor(private router: Router){
}
ngInit() {
  this.isLoading$ = this.router.events
    .map(event => event instanceof NavigationStart ||
                  event instanceof RoutesRecognised);
}
}

app.component.html

<loading></loading>
<div>
<router-outlet></router-outlet>
</div>

来源：https://stackoverflow.com/questions/44892392/router-data-resolver-loading-indicator-from-angular-4-can-it-be-replicated-in

标签

ionic3