如何获取 Vmware 清晰度向导的当前页面？答案

【问题标题】：How to get the current page of Vmware clarity wizard?如何获取 Vmware 清晰度向导的当前页面？
【发布时间】：2020-02-10 18:52:19
【问题描述】：

我们正在使用 VMware 清晰度向导动态呈现向导页面，我们需要自定义逻辑来访问向导的当前页面 ID/步骤 ID 以进行验证和其他功能。

当尝试使用 pagesCollectionService 和 navService 访问向导页面时，我们第一次正确获取了 id，例如 clr-wizard-page-0、clr-wizard-page-1 等。但是问题在于从向导单击取消/提交时，向导 ID 没有被重置，也就是说，当我们再次打开同一个向导时，向导页面 ID 与之前的 ID 保持一致例如：clr-wizard-page-4、clr-wizard-page-5 等

有没有一种方法可以让我们使用任何其他属性来访问向导的页面。注意：向导页面使用 json 动态呈现

附加图片：第二次打开向导时出现的页面 ID enter image description here

添加更多信息，请找到 stackblitz 链接以获取更多详细信息： https://clarity-light-theme-v013-phyhyk.stackblitz.io

这里我们渲染向导页面，由配置驱动对于每个向导页面，我们都显示有角度的动态表单，其中 config 包含表单字段的所有信息。由于在 for 循环中被调用，我们需要一个函数，在单击下一步/返回或单击向导的步骤时，我们应该能够验证当前表单字段并存储当前表单字段值。我添加了 (clrWizardCurrentPageChanged)="resetFormValidity()" 并且在每次页面更改时我都尝试使用wizard.currentPage.id 检索页面ID，但是ID没有被重置，当我访问多次时，我得到了增量 ID：clr-wizard-page-4、clr-wizard-page-5 等。我们正在使用以下版本： "@clr/angular": "0.11.30", "@clr/icons": "0.11.30", "@clr/ui": "0.11.30",

有没有其他方法可以确定当前是哪个页面，以便我可以将其与配置进行比较并继续验证和表单提交。

【问题讨论】：

在一个页面中可以多次出现的组件，例如clr-wizard-page，它们的id是通过增加一个全局变量来生成的。因此，如果您销毁并创建新的clr-wizard-page，计数器将继续增加。最好的方法是使用clrWizardPagePreventDefault 并处理按钮单击并在单击下一个按钮时执行验证。 vmware.github.io/clarity/documentation/v0.11/wizards 中有处理下一个按钮的示例

标签： vmware-clarity

【解决方案1】：

向导有一个名为currentPage 的属性，它将告诉您当前页面。向导的公共方法位于 Wizard Deep Dive 部分下的 https://v2.clarity.design/wizards，这可能会取代注入和使用不打算直接在应用程序中使用的内部服务的需要（根据我在您的消息中的理解，一个孤立的演示会有很大帮助）。

@ViewChild() wizard: ClrWizard;

get currentPage() {
  return this.wizard.currentPage;
}

【讨论】：