来自URL参数的init步进器

Question

我想根据URL中的参数初始化我的步进器的索引。

我很好地恢复了参数，但没有显示我的步进器。

我的网址：http://localhost/toto?stepNumber=0

我的代码：

stepNumber: Observable<number>;
ngOnInit() {
    this.stepNumber = this.route.queryParams.map(param => param.stepNumber);
    this.stepNumber.subscribe(stepNumber => {
        this.stepper.selectedIndex = stepNumber;
    })

}

步进器使用此代码：

ngOnInit() {
    this.stepper.selectedIndex = 1;
}

我认为这是可观察到的问题

显示代码：

<mat-horizontal-stepper [linear]="true" #stepper>
  <mat-step [stepControl]="nameForm" label="Give it a name!">
    <form [formGroup]="nameForm">
      <mat-form-field>
        <input matInput placeholder="Resource's name" formControlName="name">
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Summon</button>
      </div>
    </form>
  </mat-step>
  <mat-step label="Summoning" [completed]="isComplete()"  [editable]="false">
      <div fxLayout="column" fxLayoutAlign="center center" style="margin-top: 24px">
          <mat-spinner></mat-spinner>
          <h2>{{STATUS_LABEL[status]}}</h2>
      </div>
  </mat-step>
  <mat-step label="Result" [editable]="false">
    <div *ngIf="status === 'SUCCESS'" fxLayout="column" fxLayoutAlign="center center" style="margin-top: 24px">
        <span class="img alive"></span>
    </div>
    <h2 *ngIf="status === 'FAILURE'">That resource warped into the void :(</h2>
  </mat-step>
</mat-horizontal-stepper>