如何使用带有垫子步进器的离子按钮

Question

我正在使用 ionic、angular 8 和 @angular/material/stepper

我已经将样式应用于 ion-button 标签（由购买的组件库提供）。我想在 map-stepper 中的下一个按钮上使用这个 stying。

但是，如果我从

切换（工作）按钮

<button mat-button margin-top matStepperNext shape="round" button-round fill="outline">{{config.nextButton}}</button>

到

<ion-button mat-button margin-top matStepperNext shape="round" button-round fill="outline">{{config.nextButton}}</ion-button>

不再具有推进步进器的功能。有没有一种简单的方法可以将 matStepperNext 指令应用于 ion-button 标签？

Answer 1

我刚刚遇到这个问题，这里是我发现的：

在@angular/material/stepper/stepper-button 指令的源代码中，该指令的选择器是button[matStepperNext] （用于“下一步”按钮）。所以我们不能简单地使用ion-button 并期望它在单击时前进或后退步进器：选择器不匹配。

来源：https://github.com/angular/components/blob/70ff528785cb9abe9f102f19b1ea87caef56a295/src/material/stepper/stepper-button.ts#L14

假设我有一个名为“myStepperInstance”的步进器，为了推进我的项目，我正在考虑创建一个侦听器，当我们单击离子按钮时执行myStepperInstance.next() 或myStepperInstance.previous()。