stenciljs-webcomponents:ion路由器是一个简单的分步向导吗

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>
);
}

在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>

在某个时候，我想禁用离子选项卡按钮，只使用它们来显示活动选项卡，但现在它们是活动的，因为我有几个问题：

1. 应用程序不以"；步骤一"；(表格(。我看到顶部的选项卡，我可以点击任何选项卡来选择它，但如何从第一步开始？(组件WillLoad中的this.selectedTab = 'tab1'(
2. 在第一步中，我放置了一个<ion-button disabled={!this.valid} routerDirection = 'forward'>Next</ion-button>，它会在填写表单时启用，但当我点击它时，什么都没有发生(我尝试了href="/two"，但没有成功…(
3. 顺便问一下，如何将表单数据传递到下一步

感谢您的帮助。。。谢谢

Answer 1

在路由定义中，component应该是选项卡的名称(tab属性(，而不是选项卡内部的组件(请参阅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编码等问题。