Как я могу получить доступ к компонентам в MatStep по машинописи в angular - PullRequest
Новая
       22

Как я могу получить доступ к компонентам в MatStep по машинописи в angular

0 голосов
/ 31 марта 2020

Мне нужно получить доступ ко всем компонентам на шаге степпера в машинописи, у меня есть следующее: 

<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");     
}

, поэтому есть ли что-то вроде innerComponents внутри MatStep?

1 Ответ

0 голосов
/ 01 апреля 2020

Исходя из вашего комментария, звучит так, как будто вы хотите динамически изменять содержание степпера, основываясь на предыдущем шаге. Для этого я бы использовал подход, основанный на событиях, а не императивный подход.

Решением может быть отправка событий из компонентов шага в родительский компонент. Затем пусть родительский элемент отобразит соответствующие изменения.

Родительский 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 каждого компонента.

Это также упрощает рассуждение, поскольку каждый компонент зависит только от заданных событий. , а не прямая зависимость.

...