Component realoading when changing uri

[stefanhuber]

Resources: Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

`-- @stencil/[email protected]

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

<stencil-router>
  <stencil-route-switch>       
    <stencil-route url="/complaints/state/:state" component="app-complaint-list" />
  </stencil-route-switch>   
</stencil-router>

When chaning the route with a <stencil-route-link> the component is not reloading. e.g.:

<stencil-route-linkanchorRole="link" anchorClass="nav-link" activeClass="active" url="/complaints/state/open">...
<stencil-route-linkanchorRole="link" anchorClass="nav-link" activeClass="active" url="/complaints/state/closed">...

Clicking on the links doesn't reload the app-complaint-list.

Expected behavior: An already loaded component should reload if the uri changes.

Steps to reproduce: Code above

Related code: Code above

Other information: Code above

[blikblum]

Probably you need to declare a @Prop() match and inject router properties (https://github.com/ionic-team/stencil-router/wiki/Inject-history-into-a-deep-component) in app-complaint-list class

[starikcetin]

Found a solution:

  @Prop() match: MatchResults;
  @Watch('match')
  matchWatchHandler(newValue, oldValue) {
    // refresh your state here
  }

When the parameter changes in the URL, the match prop also changes. So we can trigger a @Watch and refresh the component's state.