如何使用 ng2 以编程方式 go 进行下一步

Question

I'm using Ng2-archwizard, what i want is to go to the next step using component.ts i mean with javascript function:

<wizard>
  <wizard-step stepTitle="Title of step 1">
  Content of Step 1
  <button type="button" nextStep>Next Step</button>
  <button type="button" goToStep="2">Go directly to third Step</button>
</wizard-step>
<wizard-step stepTitle="Title of step 2" optionalStep>
  Content of Step 2
  <button type="button" previousStep>Go to previous step</button>
  <button type="button" nextStep>Go to next step</button>
</wizard-step>
<wizard-step stepTitle="Title of step 3">
  Content of Step 3
   <button type="button" previousStep>Previous Step</button>
  <button type="button" (click)="finishFunction()">Finish</button>
 >/wizard-step>

Answer 1

Try this in your component :

  // At the top of my component class that implements the <wizard>
  @ViewChild(WizardComponent)
  public wizard: WizardComponent;

  // then later, this works great
  this.wizard.model.navigationMode.goToStep(1)

Answer 2

This really helped me, especially mentioning this is from ng2-archwizard. Someone at my company basically copied the whole library and removed all reference of the creator(I added it back in) and so I couldn't figure out how this wizard component worked.