我如何通过 angular 中的打字稿访问 MatStep 中的组件

Question

我需要在打字稿中访问步进器步骤中的所有组件，我有以下内容：

<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 的东西？

Answer 1

根据您的评论，听起来您想根据上一步动态更改步进器内容。为此，我会使用 event-based 方法，而不是命令式方法。

一种解决方案是将步骤组件中的事件发送到 parent 组件中。然后让 parent 呈现适当的更改。

Parent 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>

Parent打字稿

step1State = new EventEmitter();

Child 打字稿 app-comp0

@Output()
stateChanged = new EventEmitter();

Child 打字稿 app-comp1

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

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

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

我如何通过 angular 中的打字稿访问 MatStep 中的组件

How i can access components in a MatStep by typescript in angular

typescript

angular

angular-material-stepper