Angular Clarity Wizard:只需点击一下即可添加并导航到新页面

时间:2017-10-26 14:02:10

标签: angular wizard vmware-clarity

我正在使用Clarity Design System来构建我的角度应用程序,我想制作一个有点复杂的向导。

在我的用例中,用户启动一个包含两个页面的向导。在第一页,她被问到一个问题。根据答案,将在两个页面之间插入两个新向导页面中的一个。即:

1问题页面(是或否?)
2完成

将成为

1问题页面 2是新页面是的 3完成

1问题页面 2号新页面 3完成

根据用户的回答。

我正在尝试构建的内容与Skipping and Unskipping Steps示例之间的区别在于,我希望在第一页上有两个自定义按钮,是&不,这样用户就不必单击一个额外的按钮(第一页的“下一步”按钮)。

然而,我使用示例中使用的<clr-wizard-page *ngIf="!skipStepTwo">方法来隐藏/显示动态页面。问题是,似乎我尝试处理的每个事件都是为了导航到动态页面2,然后才将这个新页面添加到pagesCollection中。我最终出现了新页面,但向导已移至最后一页(第3页完成)。

周围有什么办法吗?我可以创建一个新页面并通过一次用户点击移动到该页面吗?

1 个答案:

答案 0 :(得分:2)

如果没有您的确切代码,我必须猜测您可能正在做什么,但使用自定义按钮,您需要设置标志,然后更改向导页面。这是一个潜在的解决方案。 https://stackblitz.com/edit/clarity-wizard-skipping-custom-buttons

这里的问题是切换向导页面的状态并在相同的更改检测周期中导航不会及时提交新页面以导航到它,从而跳转到下一页。我们有一个与此相关的已知错误。因此,解决方法是使用setTimeout将导航延迟到下一个循环,以便新页面已解析并成为正确的页面。