Ionic 4/5: Reuse a component on filter change while updating the URL

Ionic Framework
1

I want to reuse a component on filter change, while updating the URL. My example to make this a bit more clear:

  • I have a page with some kind of a filter component, and a list of items below it. My path is /filtered-list
  • When the user changes the filter, I want the path to be something like /filtered-list/my-searchtext
  • I don`t want the whole page to be reloaded, only the path and the list should be updated. So I define my own RouteReuseStrategy
  • This works: On a filter change, the URL is updated without reloading the component

BUT:

It is not compatible with the way the ionic NavController handles it’s history. When I call NavController.pop() after it, it always returns to the first path of the filtered list. An example to understand this better

  • User goes to /filtered-list
  • User filters the list and is now at /filtered-list/my-searchtext. Component it reused, because we defineded the RouteReuseStrategy which does that.
  • User changes to a detail page, e.g. /item/whatever. On this page there is a button which triggers NavController.pop(). User clicks it
  • User should be at /filtered-list/my-searchtext. But he is at /filtered-list, because Ionic did not save the url change with reused route to it`s history

I created an stackblitz example, and created an issue on github.
I got the answer, that this is the expected behaviour of ionics router logic.

I would like to discuss that:
In my opinion, a framework which is meant to be great for PWAs needs to be able to change URL without reloading the component because

  • Url needs to be updated, because every filtered view should be directly accessable and therefore sharable. That`s a web best practise, and should work in PWAs also
  • It should be possible to change a filter without an animation or a flickering (when not reusing component), because a modern app user is used to have great performance and no strange effects when changing a filter value

So, my questions are

  • Are there any workarounds for that problem?
  • Is there a common mistake in my way of thinking about this topic? I`m suprised about the answer on github, that the current way the ionic router handles this is expected, without the need to improve it.

I created two examples

2

A better and simpler option here is to use the navigate and navExtras from angular router

Similar to what you had in your setup, I did something like

  ngOnInit() {
    const filter = this.activatedRoute.snapshot.queryParamMap.get('filter');
    if (filter) {
      this.filterVal = parseInt(filter);
    }
  }
  increment() {
    this.filterVal += 1;
    this.navigate();
  }
  decrement() {
    this.filterVal -= 1;
    this.navigate();
  }
  navigate() {
    const navExtras: NavigationExtras = {
      queryParams: { filter: this.filterVal },
    };
    this.router.navigate([], { ...navExtras });
  }

This approach utilizes query parameters which I think fit this use case better. RouteReuseStrategy is really not something you should be touching in this case. If you just want to update a portion of your url, there are simpler ways to do so.

Example app: https://github.com/mhartington/filter-and-navigation

2 Likes
3

Thank you. I try to avoid QueryParams in my App for some reasons.

Which ways do you exactly mean when you say “If you just want to update a portion of your url, there are simpler ways to do so”?

4

QueryParams :smile:
These are exactly the type of mechanisms I was talking about.