Angular Cdk步进器，如何检测何时添加了新步骤

Question

我有一个基于 Cdk 的自定义步进器，但它是动态的。所以它绑定到一个 FormArray。当一个项目被添加到 formArray 时，我需要重定向到最新的步骤。 CdkStepper 似乎不会在项目添加到步骤集合时触发任何事件。

我尝试订阅 FormArray 上的 valueChange，但它在添加新步骤之前触发。

Here is a stackblitz with a setup.

Answer 1

CdkStepper has a _steps: QueryList<CdkStep> property which has a changes: Observable<any> property 作为添加到 CdkStepper.

的新步骤发出值

但是，在 OnInit _steps 属性 上使用时，似乎尚未填充。因此，使用 settimeout 等待 _steps 的下一个更改检测周期进行初始化可以解决问题。在您的示例中，按如下方式更改 CustomStepperComponent：

ngOnInit() {
  setTimeout(()=>{
    this._steps.changes.subscribe(x => {
      this.selectedIndex = x.length - 1;
    });
  });
}

这是我的工作演示

https://stackblitz.com/edit/angular-cdkstepper-formarray-jnftgb

顺便说一句，_steps 属性 在 "@angular/material": "8.0.0"

中是 deprecated