angular - 如何打开星云“步进器”取决于查询参数？

Question

我正在尝试打开取决于查询参数的星云“步进器”步骤。例如：如果路线是 /products/create?step=third 应该打开第三步

<nb-stepper [selected]="'second'">
  <nb-step [stepControl]="firstForm" [label]="first" #first>
   first
  </nb-step>
  <nb-step [label]="second" #second>
    second
  </nb-step>
  <nb-step [label]="third" #third>
    third
    <ng-template #third>Third step</ng-template>
  </nb-step>
</nb-stepper>

我曾尝试使用选定的属性，但没有帮助

Answer 1

在您的组件中获取查询参数并使用该参数在您的组件中设置选定的步骤

selectedStep='second';

constructor(activatedRoute:ActivatedRoute){
this.activatedRoute.queryParams.subscribe((data)=>{
if(data['step']){
this.selectedStep =data['step']
}
})
}

并在 html

<nb-stepper [selected]="selectedStep">