时间戳

首页 > 解决方案 > 我如何通过有角度的打字稿访问 MatStep 中的组件

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

问题描述

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

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

标签： angulartypescriptangular-material-stepper

解决方案

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

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

父 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' 链接不同的组件。

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

推荐阅读