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

Posted 2023-05-07

【中文标题】Angular Cdk步进器，如何检测何时添加了新步骤

【英文标题】：Angular Cdk stepper, how to detect when new step added

【发布时间】：2019-10-26 21:38:41

【问题描述】：

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

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

Here is a stackblitz with a setup.

【参考方案1】：

CdkStepper 有一个 _steps: QueryList<CdkStep> 属性，该属性有一个 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

【讨论】：

_steps 在 v7 中被替换为 getter 步骤以更好地封装该字段。所以这个领域不会消失，只是最终可能会被隐藏，你应该开始使用 steps 而不是 _steps 来做同样的事情。应该很容易做出改变。

嗨，ysf 和@Ingó Vals。我知道这个问题已经过时了，但是你们中是否有人为这种自定义步进器提供了有效的 TestBed 设置示例？实现非常顺利，但没有描述测试设置。嘲笑这些步骤似乎是我无法理解的关键部分。如果你们中的一个人有一个示例设置，我很乐意将其作为一个新问题发布，以获得甜蜜的代表增益。

@Berlin_Bro 恐怕我没有这样的 TestBed 设置。但无论如何，请随时将其作为问题发布。