如何正确使用Clarity Design向导的clrWizardOpenChange等输出事件？

你现有代码里对clrWizardOpenChange的写法有误——它是输出事件，应该用圆括号()绑定，而非方括号[]，且绑定方法时不要加括号（否则会在组件初始化时立即执行，而非事件触发时执行）。下面是三个事件的正确用法：

1. clrWizardOpenChange（向导打开/关闭状态变化时触发） #

事件参数为布尔值，true表示向导即将打开，false表示即将关闭。可用来在向导状态切换时执行初始化或清理逻辑。

2. clrWizardCurrentPageChanged（页面切换完成后触发） #

事件参数为当前激活的ClrWizardPage实例，能获取当前页面的ID、标题等信息，也可用来执行页面切换后的专属逻辑（比如加载对应页面的数据）。

3. clrWizardOnFinish（点击Finish按钮且所有页面验证通过后触发） #

事件参数为ClrWizard实例，用于执行向导完成后的收尾操作（比如提交表单数据、关闭向导等）。

修改后的完整代码 #

HTML 部分：

<clr-wizard #ecoAssessWizard id="idWizard" 
    [(clrWizardOpen)]="showWizard" 
    [(clrWizardForceForwardNavigation)]="wizardForceForwardNav" 
    [(clrWizardDisableStepnav)]="wizardDisableStepnav"
    (clrWizardOpenChange)="onWizardOpenChange($event)"
    (clrWizardCurrentPageChanged)="onWizardPageChanged($event)"
    (clrWizardOnFinish)="onWizardFinish($event)"
    (clrWizardPreventDefaultCancel)="onWizardPreventDefaultCancel()"
    clrWizardSize="xl">
    <clr-wizard-title id="idWizardTitle"> {{ "SITE.FLOATING_BUTTON.ECO_ASSESS.LABEL" | translate}} </clr-wizard-title>

    <clr-wizard-button [type]="btnCancel">Cancel</clr-wizard-button>
    <clr-wizard-button [type]="btnPrevious">Back</clr-wizard-button>
    <clr-wizard-button [type]="btnNext">Next</clr-wizard-button>
    <clr-wizard-button [type]="btnFinish">Finish</clr-wizard-button>

    <clr-wizard-page #wizardPage1 id="idWizardPage1">
        <ng-template clrPageTitle>{{ "SITE.FLOATING_BUTTON.CONTENTS.ECO_ASSESS.STRING_WIZARD_PAGE_1_TITLE" | translate}}</ng-template>
    </clr-wizard-page>

</clr-wizard>

TypeScript 部分：

import { Component, ViewChild } from '@angular/core';
import { ClrWizard, ClrWizardPage } from '@clr/angular';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  showWizard = false;
  wizardForceForwardNav = false;
  wizardDisableStepnav = false;
  @ViewChild('ecoAssessWizard') ecoAssessWizard!: ClrWizard;

  // 向导打开/关闭状态变化回调
  onWizardOpenChange(isOpen: boolean): void {
    console.log(isOpen ? '向导即将打开' : '向导即将关闭');
    // 示例：打开时初始化页面数据，关闭时清理临时数据
  }

  // 页面切换完成回调
  onWizardPageChanged(currentPage: ClrWizardPage): void {
    console.log('当前激活页面ID:', currentPage.id);
    // 示例：根据当前页面加载对应业务数据
  }

  // 向导完成回调
  onWizardFinish(wizard: ClrWizard): void {
    console.log('向导流程完成，开始执行收尾逻辑');
    // 示例：提交表单数据到后端
    // 提交成功后手动关闭向导（按需）
    wizard.close();
  }

  onWizardPreventDefaultCancel(): void {
    // 你的取消操作阻止逻辑
  }
}

关键注意点 #

• 所有输出事件必须用圆括号()绑定方法，方法名后不要加括号（事件会自动传入对应参数）。
• clrWizardOnFinish仅在所有页面验证通过时触发，若需自定义页面验证，可给clr-wizard-page添加[clrWizardPageIsValid]属性控制验证状态。

内容的提问来源于stack exchange，提问作者Amrmsmb