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

Question

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

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

Here is a stackblitz with a setup.

Answer 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