Stencil Routing with componentProps

Stencil
1

I have a question regarding the use of component properties when routing programmatically.
I’ve trimmed down the Ionic-PWA-Toolkit sample to following code blocks:

my-app.tsx

import '@ionic/core';
import '@stencil/core';
import { Component } from '@stencil/core';

@Component({
  tag: 'my-app',
  styleUrl: 'my-app.scss'
})
export class MyApp {

  render() {
    return (
      <ion-app>
        <main>
          <stencil-router>
            <stencil-route url='/' component='app-home' exact={true}>
            </stencil-route>

            <stencil-route url='/profile/:name' component='app-profile'>
            </stencil-route>
          </stencil-router>
        </main>
      </ion-app>
    );
  }
}

app-home.tsx

import { Component, Prop } from '@stencil/core';
import { RouterHistory } from '@stencil/router';

@Component({
  tag: 'app-home',
  styleUrl: 'app-home.scss'
})
export class AppHome {
  
  @Prop() history: RouterHistory;

  handleClick() {
    this.history.push("/profile/CatInTheHat", {
      thingOne: "Thing 1",
      thingTwo: "Thing 2"
     });
  }

  render() {
    return (
      <ion-page>
        <ion-header>
          <ion-toolbar color='primary'>
            <ion-title>Ionic PWA Toolkit</ion-title>
          </ion-toolbar>
        </ion-header>

        <ion-content>
          <p>
            Welcome to the Ionic PWA Toolkit.
          </p>

          <ion-button onClick={this.handleClick.bind(this)}>
            Profile page
          </ion-button>
        </ion-content>
      </ion-page>
    );
  }
}

app-profile.tsx

import { Component, Prop } from '@stencil/core';
import { MatchResults } from '@stencil/router';

@Component({
  tag: 'app-profile',
  styleUrl: 'app-profile.scss'
})
export class AppProfile {

  @Prop() match: MatchResults;
  @Prop() thingOne: string;
  @Prop() thingTwo: string;

  render() {
    if (this.match && this.match.params.name) {
      return (
        <ion-page>
          <ion-header>
            <ion-toolbar color='primary'>
              <ion-title>Ionic PWA Toolkit</ion-title>
            </ion-toolbar>
          </ion-header>

          <ion-content>
            <p>
              Hello! My name is {this.match.params.name}.
              My name was passed in through a route param!
              And these are my friends, {this.thingOne} and {this.thingTwo}.
            </p>

          </ion-content>
        </ion-page>
      );
    }
  }
}

I was expecting that this.history.push(…) with the object I’m passing in would set the properties in app-profile, but nothing comes across. What am I doing wrong?

Thanks!

2

First, I think the best way to ask a Stencil question right now is to use Slack. The devs sometimes hang out there, as do some motivated community members. If you make a repo and post a link there, you’ll get attention. I use this forum to post things I’ve completed for the most part. There are only a couple posters here who are actively using Stencil right now.

Second, I don’t know the official answer to your question, but if you look at the sample Ionic/Stencil app, they are passing information in a way that is different from the documentation on the site. (Not using MatchResults at all.)

1 Like
3

Cool, thanks. I searched through that sample app, but I didn’t see any examples of history.push being used where an object is actually being passed in.
I’ll drop a note in Slack and see what happens.

4

For example

5

If look at line 27…

this.history.push(`/news/${this.page}`, {});

I’m trying to find an example where that second parameter for the state is not an empty object. The Stencil documentation does show how to pass in componentProps, but the only example I’ve found was using a

<stencil-route>

element and not using history.push() programmatically.

Sorry, it’s very likely I’m still just missing something, but it’s not yet obvious to me what it is.

6

I like how they created .tsx instead of using .jsx
so it’s typescript running on jsx…

Ionic 3 has problems with concurrency.
When many things should happen at a time, I see some delays occur…
There’s no way to completely prevent this issue…
Especially when a button is triggering many functions of a single cordova plugin, it messes up with timing easily.
I hope stencil will solve this problem…

7

Hello, did you get a chance to find out how to pass in a parameter / object into the “state” variable and how to retrieve that parameter from the destination route?

Thank you!

8

Yes, I did. Sorry, I join the Slack community and totally forgot about this posted question. That second parameter isn’t passing a new state directly into the component. Instead, it’s adding a state object to the RouterHistory record that you’re "push"ing on the stack. Example usage, then is:
this.history.push("/your-component-route", { myProperty: "propertyValue" });

and then on the receiving component, maybe in the componentWillLoad function,
this.localProperty = this.history.location.state.myProperty;

1 Like