我如何通过有角度的打字稿访问 MatStep 中的组件答案

【问题标题】：How i can access components in a MatStep by typescript in angular我如何通过有角度的打字稿访问 MatStep 中的组件
【发布时间】：2020-03-31 10:02:04
【问题描述】：

我需要在 typescript 中访问 stepper 步骤中的所有组件，我有以下内容：

<mat-vertical-stepper #stepper (selectionChange)="ChangeSelection($event)">
  <mat-step label="Step 1">
    Step 1
  </mat-step>
  <mat-step label="Step 2">
    Step 2
    <app-comp1>  </app-comp1>
    <app-comp2>  </app-comp1>
  </mat-step>
</mat-vertical-stepper>

知道comp1和comp2实现IComp（自定义接口）

export interface IComp {
  MethodeFromInterface?: { (data?: any): void }; //this is optional
}

export class Comp1 implements IComp {
  MethodeFromInterface(data: any) {
    //do something here
  }
}

export class Comp2 implements IComp {
  MethodeFromInterface(data: any) {
    //do something here
  }
}

主要成分有

ChangeSelection(event) {
  var m = (<IComp>event.selectedStep);
  if (m.MethodeFromInterface.InnerComponents[0]) // InnerComponents is an example  
    m.MethodeFromInterface("TEST");     
}

那么 MatStep 里面有没有类似 innerComponents 的东西？

【问题讨论】：

为什么您需要访问步骤中的所有组件？如果是用于验证，您可以在每个步骤中使用stepControl 属性
下一步应该加载的内容取决于上一步的输入我将使用传递参数的方法加载内容

标签： angular typescript angular-material-stepper

【解决方案1】：

根据您的评论，您似乎想根据上一步动态更改步进器内容。我会为此使用基于事件的方法，而不是命令式方法。

一种解决方案可能是将事件从步骤组件发送到父组件。然后让父级渲染相应的更改。

父 HTML

<mat-vertical-stepper #stepper (selectionChange)="ChangeSelection($event)">
  <mat-step label="Step 1">
    Step 1
    <app-comp0 (stateChanged)="step1State.next($event)">  </app-comp0>
  </mat-step>
  <mat-step label="Step 2">
    Step 2
    <app-comp1 [step1State]="step1State | async">  </app-comp1>
    <app-comp2 [step1State]="step1State | async">  </app-comp1>
  </mat-step>
</mat-vertical-stepper>

父打字稿

step1State = new EventEmitter();

儿童打字稿app-comp0

@Output()
stateChanged = new EventEmitter();

儿童打字稿app-comp1

@Input()
set step1State(newState) {
  // Do work here
}

现在Step 2 组件依赖于Step 1 组件的状态。您可以继续此操作，根据每个组件的许多 @Input 和 @Output 链接不同的组件。

这也使得推理更容易，因为每个组件只依赖于给定的事件，而不是直接依赖。

【讨论】：