navCtrl push without reload/render the component anew? [PWA]

Ionic Framework ionic-v3
1

Hey, long time v1 user and now making the jump to v3!

I have this hobby PWA project built on v3: https://gamemusicplayer.io (repo: https://github.com/zwacky/game-music-player) and I want the tracks to be shareable. Meaning as soon as a track begins to play, the URL should be changed as well.

Looks like a case for the ionic DeepLinker / @Page-Decorator. But I can’t get it to work how I want it to.
Whenever i use navCtrl.push() or navCtrl.setRoot(), the whole page/component is rerendered. Since there is a very unoptimized rendering of 1000+ items, I don’t want that to happen everytime.

Is there a way to tell ionic not to re-render the whole list when updating the navigation?
Or should I go entirely in a different way or handle pushStates entirely on my own?

Cheers!

2

Hi @zwacky
if you are using ngFor
i guess you can use it’s trackBy feature, it will help you

https://angular.io/resources/images/devguide/template-syntax/ng-for-track-by-anim.gif

it’s from angular
check the documentation
https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngFor

3

Hey @MarcusIII, thanks for pointing this out. This however doesn’t solve the complete reload of the component itself, only increases the performance when updating single rows.

4

@zwacky yeah, sorry misunderstood what you needed
well two things might help

first : keep the list data in a service.

second : set the page with the huge data as root
basically making it the parent and any other page you navigate to the child
with that it won’t be destroyed

5

I see what you mean. That change would pretty much dictate everything about the app and adding new pages will be burdensome…

I might give angular’s Location service a try with replaceState, so it automatically uses the pushState/HistoryApi. Not super happy with it, but maybe works out too.