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

【问题标题】：Angular Cdk stepper, how to detect when new step addedAngular Cdk步进器，如何检测何时添加了新步骤
【发布时间】：2019-10-26 21:38:41
【问题描述】：

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

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

【问题讨论】：

【解决方案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;
    });
  });
}

这是我的工作演示

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

【讨论】：

_steps 在 v7 中被替换为 getter 步骤以更好地封装该字段。所以这个领域不会消失，只是最终可能会被隐藏，你应该开始使用 steps 而不是 _steps 来做同样的事情。应该很容易做出改变。
嗨，ysf 和@Ingó Vals。我知道这个问题已经过时了，但是你们中是否有人为这种自定义步进器提供了有效的 TestBed 设置示例？实现非常顺利，但没有描述测试设置。嘲笑这些步骤似乎是我无法理解的关键部分。如果你们中的一个人有一个示例设置，我很乐意将其作为一个新问题发布，以获得甜蜜的代表增益。
@Berlin_Bro 恐怕我没有这样的 TestBed 设置。但无论如何，请随时将其作为问题发布。