如何在 ngx-admin 星云步进器中以编程方式将一个步骤导航到另一个步骤？

Question

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

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

@ViewChild("stepper") stepper: NbStepperComponent;

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

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

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

Answer 1

this.stepper.goto(2);

它将导航到第二步...

Answer 2

这样使用，

在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.

如何在 ngx-admin 星云步进器中以编程方式将一个步骤导航到另一个步骤？

How to navigate one step to another steps programmatically in ngx-admin nebular stepper?

angular

nebular

ngx-admin