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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…