Clarity clr-wizard 的禁用按钮不起作用

Question

我正在使用来自 Angular 6 项目的清晰设计框架中的clr-wizard。

我在 clr-wizard 中有两个步骤，如下面的代码。

<clr-wizard>
    <clr-wizard-page [clrWizardPageNextDisabled]="!stepFirstNextButtonEnable">
        <ng-template clrPageTitle>Platforms</ng-template>
        <ng-container>
            ....
        </ng-container>
        <ng-template clrPageButtons>
            <clr-wizard-button class="custom-btn-primary" [type]="'custom-next-step-first'">NEXT</clr-wizard-button>
        </ng-template>
    </clr-wizard-page>

    <clr-wizard-page [clrWizardPageNextDisabled]="!stepSecondNextButtonEnable">
        <ng-template clrPageTitle>Platforms</ng-template>
        <ng-container>
            ....
        </ng-container>
        <ng-template clrPageButtons>
            <clr-wizard-button class="custom-btn-primary" [type]="'custom-next-step-second'">NEXT</clr-wizard-button>
        </ng-template>
    </clr-wizard-page>
</clr-wizard>

我必须在每个步骤中使用自定义NEXT 按钮，因此我使用<ng-template clrPageButtons></ng-template> 并且我使用[clrWizardPageNextDisabled] 在每个步骤中禁用按钮。

在第一步按钮禁用前几天工作。现在这行不通了。

如果我们删除自定义按钮<ng-template clrPageButtons>

参考：

https://vmware.github.io/clarity/documentation/v0.13/wizards

Answer 1

自定义按钮的type 应为next 或custom-next：

<clr-wizard-button type="custom-next">NEXT</clr-wizard-button>

Forker Stackblitz