如何将离子按钮与垫步进器一起使用

Question

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

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

但是，如果我将（工作）按钮从

<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 并期望它在单击时前进或后退步进器：选择器不匹配。

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

How to use an ion-button with a mat-stepper