Ionic 如何使用离子按钮与垫步进

h79rfbju  于 12个月前  发布在  Ionic
关注(0)|答案(2)|浏览(167)

我使用离子,Angular 8,和@Angular /材料/步进
我已经在离子按钮标签上应用了样式(由购买的组件库提供)。我想在Map步进器中的下一个按钮上使用这个样式。
但是,如果我将(工作)按钮从

<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指令应用到离子按钮标签上?

s4chpxco

s4chpxco1#

我知道这是一个老问题,但我今天面对它。
我的解决方案是隐藏角按钮,并创建一个点击它与我的离子按钮。

在html中

<div>
          <button mat-button matStepperNext style="display: none" id="nextFirstStep"></button>
          <ion-button  class="primary-btn" shape="round" expand="block" (click)="nextFirstStep()">Next</ion-button>
        </div>

字符串

在TS

nextFirstStep() {
  document.getElementById('nextFirstStep')?.click()
}


如果你有很多步骤,你可以通过在其中传递按钮id来改进方法,以便在多个按钮上使用它。

ars1skjm

ars1skjm2#

我刚刚遇到了这个问题,在这里我发现:
@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()

相关问题