将步进器传递到另一个组件中

时间:2018-09-27 17:35:27

标签: angular typescript angular6 angular-material-6

我正在使用MatStepper,我在mat-step内有一个组件,其中有一个按钮,单击按钮时我需要更改step,我不确定是否可以通过stepper @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();
    }

  }
}

0 个答案:

没有答案