stenciljs web components : in-router 一个简单的分步向导？

Question

我的模板应用程序是一个分步向导。在 app-root.tsx 我有

render() {
    return (
      <ion-app>
        <ion-router useHash={false}>
          <ion-route component="app-home" >
            <ion-route url="/" component="step-one" />
            <ion-route url="/two/:data" component="step-two" />
            <ion-route url="/three/:data" component="step-three" />
          </ion-route>
        </ion-router>
        <ion-nav />
      </ion-app>
    );
  }

在应用程序中-home.tsx我有

<ion-navbar>
  <ion-tabs>
    <ion-tab tab="tab1" component="step-one" />
    <ion-tab tab="tab2" component="step-two" />
    <ion-tab tab="tab3" component="step-three" />

    <ion-tab-bar slot="top" selectedTab={this.selectedTab)}>
      <ion-tab-button tab="tab1">Step One</ion-tab-button>
      <ion-tab-button tab="tab2">Step Two</ion-tab-button>
      <ion-tab-button tab="tab3">Step Three</ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-navbar>

有时我想禁用 ion-tab-buttons 并仅使用它们来显示活动选项卡，但现在它们处于活动状态，因为我遇到了几个问题:

该应用程序不是以“第一步”（一种形式）的内容开始的。我在顶部看到选项卡，我可以单击任何选项卡以 select 它，但是如何让它从第一步开始？（this.selectedTab = 'tab1' 在 componentWillLoad 中）
在第一步中，我放置了一个显示的 <ion-button disabled={!this.valid} routerDirection = 'forward'>Next</ion-button>，在填写表单时启用，但是当我点击它时，没有任何反应（我尝试 href="/two" 但没有成功.. .)
顺便说一下，如何将表单数据传递给下一步？

感谢任何帮助...谢谢！

Answer 1

在路由定义中，component 应该是选项卡的名称（tab 属性）而不是选项卡内的组件（参见 Router integration在 ion-tabs 文档中）。

<ion-route component="app-home">
  <ion-route url="/" component="tab1" />
  <ion-route url="/two/:data" component="tab2" />
  <ion-route url="/three/:data" component="tab3" />
</ion-route>

按钮无法使用 href 属性的原因可能是缺少 :data 参数。

我建议不要通过 URL 传递数据，而是使用中央数据存储，例如 Stencil Store。这样你就不必担心 URL 编码等

stenciljs web components : in-router 一个简单的分步向导？

stenciljs webcomponents : ion-router for a simple step-by-step wizard?

web-component

stenciljs