Пропустите Stepper внутри другого компонента - PullRequest
0 голосов
/ 27 сентября 2018

Я использую MatStepper и у меня есть компонент внутри mat-step, и внутри них есть кнопка, и мне нужно изменить шаг при нажатии на кнопку, я не уверен, возможно ли передать шаговый шаг как@Input, а затем измените для следующего шага.Я ищу, но не нашел ответов, связанных с этим.Кто-нибудь может мне помочь?

steppercomponent.html

 <mat-horizontal-stepper [linear]="isLinear" #stepper>
      <mat-step [completed]="false">
        <ng-template matStepLabel>
          <h5 class="step-title">Title 1</h5>
          <div class="mat-step-custom-line"></div>
        </ng-template>
        <app-items-form [matStepper]="stepper"></app-items-form>
      </mat-step>
      <mat-step [completed]="false">
        <ng-template matStepLabel>
          <h5 class="step-title">Title 2</h5>
          <div class="mat-step-custom-line"></div>
        </ng-template>

      </mat-step>
      <mat-step [completed]="false">
        <ng-template matStepLabel>
          <h5 class="step-title">Title 3</h5>
          <div class="mat-step-custom-line"></div>
        </ng-template>

      </mat-step>
    </mat-horizontal-stepper>

ItemsControlComponent.html

<form [formGroup]="formgroup">
  <div class="form-group row">
    <div class="col-md-6 col-sm-12 offset-md-3">
      <div class="col-sm-12 col-md-12 offset-md-1">
        <div class="col-sm-10 nopadding">

          <button mat-button [disabled] (click)="goForward()" class="btn btn-primary"> Next
          </button>
        </div>
      </div>
    </div>
  </div>
</form>

ItemsControlComponent.ts

export class ItemsControlComponent implements OnInit {

  @Input()
  public matStepper: MatStepper;

  constructor() {

  }

  ngOnInit() {


  }
  goForward() {
    debugger;
    if (this.formgroup.valid === true) {
      this.matStepper.next();
    }

  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...