Question

我正在尝试找到一种更好的方法来管理具有单独组件的垫式步进器。

我现在使用我的主要组件做什么。它设置页面的布局并将 #stepper 发送到子组件。

<div class="container">
 <mat-horizontal-stepper #stepper>
  <mat-step>
     <app-first-step [getStepperId]="stepper"></app-first-step>
  </mat-step>
  <mat-step>
     <app-second-step [getStepperId]="stepper"></app-second-step>
  </mat-step>
  <mat-step>
     <app-third-step [getStepperId]="stepper"></app-third-step>
  </mat-step>
 </mat-horizontal-stepper>
</div>

第二步和第三步组件需要获取 #stepper 继续下一步，需要检查API是否正确填写表格。如果正确，则可以继续执行下一步。如果不是，它们将保持同一页面或上一页。

Html 

<button (click)="canTheyGoNext()">Next</button>

Components
@Input stepperId: any;    

canTheyGoNext(){
    this.sendService.checkIfPass().subscribe(resp=>{
        if(resp.pass){
           this.stepperId.next();
        } else {
           this.stepperId.previous();
        }
    }) 
 }

这里一切都正常，但是我不确定这是否是一个好方法。还有其他方法可以通过mat-stepper做类似的事情吗？

是否有更好的方法来管理带有单独组件Angular 7的mat-stepper .next（）

0 个答案: