Ionic and Angular RouteReuseStrategy

Ionic Framework Ionic Angular
1

Hi all,
I am wondering if I should use the RouteReuseStrategy from Angular.
I have a few pages, which are loading data from an API and I am wondering if this would speed up the page loading (when returning to a page).
Is there anything already integrated from Ionic? Because I noticed that in my app.module.ts there is already an import { RouteReuseStrategy } from '@angular/router' and { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
Any help will be much appreciated!
Best regards!

2

Best to not assume that something is going to improve speed without knowing what the function is doing…

IonicRouteStrategy basically allows you to rerender the same component on route changes.

So if you go /home => /detail/1 => /detail/3 => /detail/6 the detail page component will be rendered again, allowing devs to do navigation.

Can you share how you’re loading data from your API calls? What do those components look like.

1 Like
3

Thanks for the prompt reply, @mhartington ! :slight_smile:

I have 4 tabs, which forward to two additional pages. Here are parts of my code:

The service doing the HTTP calls:

 import { HTTP } from '@ionic-native/http/ngx';

 searchData(d1, d2): Observable<any> {
    const nativeCall = this.nativeHttp.get('https://***/' + d1 + '/' + d2,
    { },
    {'x-api-key': this.value, 'Content-Type':  'application/json'});
    return from(nativeCall).pipe(
      map(results => JSON.parse(results.data))
    );
  }

  data(): Observable<any> {
    const nativeCall = this.nativeHttp.get('https://***' + this.formattedDate,
    { },
    {'x-api-key': this.value, 'Content-Type':  'application/json'});
    return from(nativeCall).pipe(
      map(mainResults => JSON.parse(mainResults.data))
    );
  }

From Tab 1, upon clicking one of the items, I get forwarded to another page, which uses:

  ngOnInit() {
    const id = this.activatedRoute.snapshot.paramMap.get('id');
    this.elementid = id;
    this.results = this.element.searchData(this.elementlid, this.formattedDate);
  }

So far so good :slight_smile: Data loads (a little bit slow, because there are big sized images, which are downloaded as ion-avatar’s.

But this is not my problem - I will resolve it with the API (the image size).

When I click on one of the elements, it opens a detail page for the specific element. This also works perfectly.
But when I get back to the page (clicking back button, it takes like maybe a second to react).

And I was wondering if the cache would help in that case. Any ideas would be very much appreciated. Let me know if I should paste more of my code.

P.S. Ionic rocks :smiley:

4

And this is the ion-content of the page I am getting back to:

<ion-content>
  <div *ngIf="data">
  <ng-container *ngFor="let item of (results | async)">
    <ng-container *ngFor="let elements of item.bc">
      <ng-container *ngIf="elements.Event.IsDeleted === null">
      <ng-container *ngFor="let titles of elements.Event.Title">
        <ng-container *ngIf="titles.Value != 'Sendepause'">
        <ion-item button [routerLink]="['/', 'details', channelid, formattedDate, elements.Event.EventId]">
          <ion-avatar slot="start">
            <img *ngIf="elements.Event.Photos != null" src={{elements.Event.Photos[0].Url}}>
            <img *ngIf="elements.Event.Photos == null" src={{elements.Content.Photos[0].Url}}>
          </ion-avatar>
          <ion-label class="ion-text-wrap">{{elements.Event.StartTime | date: 'shortTime'}} - {{ titles.Value }} 
            <p *ngIf="elements.Event.IsLive == true"><ion-badge>На живо</ion-badge></p>
            <p *ngIf="elements.Event.IsFirstEmission == true"><ion-badge>Премиера</ion-badge></p>
            <p>{{elements.Content.MpSType}}</p>
          </ion-label>          
        </ion-item>
        </ng-container>
      </ng-container>
    </ng-container>
  </ng-container>
  </ng-container>
</div>
<ion-content>

Any thoughts will be very much appreciated.