如何在 ngx-admin nebular stepper 中以编程方式将一个步骤导航到另一个步骤？答案

【问题标题】：How to navigate one step to another steps programmatically in ngx-admin nebular stepper?如何在 ngx-admin nebular stepper 中以编程方式将一个步骤导航到另一个步骤？
【发布时间】：2020-12-21 11:55:42
【问题描述】：

我正在使用星云ngx-admin 模板。我在星云步进器中遇到了一些问题。我在一个组件中使用了四个步骤。

我在组件文件中使用了 Nebular API 的方法：

@ViewChild("stepper") stepper: NbStepperComponent;

this.stepper.next();
this.stepper.previous();
this.stepper.reset();

next() 导航到下一步。
previous() 导航到前面的步骤。
reset() 导航到第一步并重置所有表单数据。

如何从第 4 步导航到第 2 步？

【问题讨论】：

标签： angular nebular ngx-admin

【解决方案1】：

这样用，

在 HTML 文件中

 <nb-stepper #stepper [(selectedIndex)]="stepperIndex">

    <nb-step [stepControl]="serviceForm" label="Select Package">

    <button nbButton 
    (click)="backToSelectPackage()">ADD</button>

    </nb-step> 

 </nb-stepper>

在 Component.ts 文件中

stepperIndex: number = 0; // here 0 is initial index

backToSelectPackage() {
  this.stepperIndex = 0; // here 0 is navigate index
}

注意：

如果使用 [(selectedIndex)] ，我们不能使用 next(), Previous() 和 nbStepperNext, nbStepperPrevious。

【讨论】：

请注意，selectedIndex 也会覆盖 nbStepperPrevious 和 nbStepperNext 按钮的行为。

【解决方案2】：

this.stepper.goto(2);

它将导航到第二步...

【讨论】：

nbstepper 中没有 goto 方法
请更新 ngx-stepper 库 RUN : "npm update ngx-stepper"
我用的是 nb 步进电机。为什么我更新 ngx-stepper
使用 this.stepper.selectedIndex=2