1

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>
JGFMK
  • 8,425
  • 4
  • 58
  • 92
  • A router isa traffic cop handling navigation. router.config.ts in wired into app-module.ts. So when url has /test/1 ,id = 1. The call is made into the service layer for record with id of via the resolver. That's an asynchronous process. Loading component.ts observes events router emits and uses it to conditionally control rendering of spinning cog. The dictionary 'key' in the router.config.ts is used by your data component.. So data-component.html includes the snippet loading-component.html. That same 'key' in the router.config.ts points to the data-component-resolver.ts – JGFMK Jul 21 '17 at 10:15
  • Reading through [this](https://forum.ionicframework.com/t/ionic-2-navcontroller-with-resolver-routing/82139), I get the feeling that there's no Ionic way of doing this. – Phonolog Jan 22 '18 at 13:52

0 Answers0