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/core@1.0.3

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.