Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
347 views
in Technique[技术] by (71.8m points)

ionic3 - 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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...