Angular Clarity Wizard:一键添加和导航到新页面
Angular Clarity Wizard: Adding and navigating to new page with one click
我正在使用 Clarity Design System 构建我的 angular 应用程序,我想制作一个稍微复杂的向导。
在我的用例中,用户启动了一个包含两个页面的向导。在第一页上,她被问到一个问题。根据答案,两个新向导页面之一将插入到两个页面之间。即:
1 个问题页面(是或否?)
2 完成
会变成
1 个问题页
2 是的新页面
3 完成
或
1 个问题页
2 号的新页面
3 完成
根据用户的回答。
我尝试构建的内容与 Skipping and Unskipping Steps 示例之间的区别在于,我希望在第一页上有两个自定义按钮,是和否,这样用户就不会不必单击额外的按钮(第一页的 "Next" 按钮)。
但是,我正在使用示例中使用的 <clr-wizard-page *ngIf="!skipStepTwo">
方法来 hide/show 动态页面。问题是,似乎我尝试处理以导航到动态页面 2 的每个事件都发生在将这个新页面添加到 pagesCollection 之前。我最终出现了新页面,但向导已移至最后一页(第 3 页完成)。
有什么办法吗?我可以创建一个新页面并通过一次用户点击移动到它吗?
如果没有您的确切代码,我不得不猜测您可能在做什么,但是对于您的自定义按钮,您需要设置标志然后更改向导页面。这是一个潜在的解决方案。 https://stackblitz.com/edit/clarity-wizard-skipping-custom-buttons
这里的问题是切换向导页面的状态并在相同的更改检测周期中导航不会及时提交新页面以便导航到它,从而跳到下一页。我们有一个与此相关的已知错误。因此解决方法是使用 setTimeout 将导航延迟到下一个周期,以便新页面已解析并成为正确的页面。
我正在使用 Clarity Design System 构建我的 angular 应用程序,我想制作一个稍微复杂的向导。
在我的用例中,用户启动了一个包含两个页面的向导。在第一页上,她被问到一个问题。根据答案,两个新向导页面之一将插入到两个页面之间。即:
1 个问题页面(是或否?)
2 完成
会变成
1 个问题页
2 是的新页面
3 完成
或
1 个问题页
2 号的新页面
3 完成
根据用户的回答。
我尝试构建的内容与 Skipping and Unskipping Steps 示例之间的区别在于,我希望在第一页上有两个自定义按钮,是和否,这样用户就不会不必单击额外的按钮(第一页的 "Next" 按钮)。
但是,我正在使用示例中使用的 <clr-wizard-page *ngIf="!skipStepTwo">
方法来 hide/show 动态页面。问题是,似乎我尝试处理以导航到动态页面 2 的每个事件都发生在将这个新页面添加到 pagesCollection 之前。我最终出现了新页面,但向导已移至最后一页(第 3 页完成)。
有什么办法吗?我可以创建一个新页面并通过一次用户点击移动到它吗?
如果没有您的确切代码,我不得不猜测您可能在做什么,但是对于您的自定义按钮,您需要设置标志然后更改向导页面。这是一个潜在的解决方案。 https://stackblitz.com/edit/clarity-wizard-skipping-custom-buttons
这里的问题是切换向导页面的状态并在相同的更改检测周期中导航不会及时提交新页面以便导航到它,从而跳到下一页。我们有一个与此相关的已知错误。因此解决方法是使用 setTimeout 将导航延迟到下一个周期,以便新页面已解析并成为正确的页面。