Question

很想知道是否可以为“垫脚步”按钮单击事件。对于每个垫步按钮，我想添加一个(click)事件，该事件调用一个method。换句话说，垫步按钮的作用类似于常规按钮。

这是步骤： https://material.angular.io/components/stepper/overview

这是我的代码：

<mat-step>
<ng-template matStepLabel (click) = "createView()">Output</ng-template>
</mat-step>

我收到此错误：

模板解析错误：嵌入式模板上的任何指令都不会发出事件绑定单击。确保事件名称拼写正确，并且所有指令均在“ @ NgModule.declarations”中列出。（“ eateView（）”>输出->

Answer 1

因此，我遇到了这个问题，简单的解决方法是将步骤标签的实际内容包装在p标签中，然后在其中添加click事件。以您的示例为例，

<mat-step>
  <ng-template matStepLabel>
    <p (click)="createView()">Output</p>
  </ng-template>
</mat-step>

或者，更强大的功能是，您可以像这样在父级步进器组件中挂入selectionChange事件：

<mat-horizontal-stepper (selectionChange)="selectionChange($event)">

发出的事件具有以下属性：https://material.angular.io/cdk/stepper/api#StepperSelectionEvent

Answer 2

（selectionChange）事件在步进更改后触发，想要在selectionChange之前调用函数。

下面的代码对我有用，请尝试一下，它将对整个垫步按钮都有效（由于自定义CSS，您也可以为跨度添加CSS）。

.mat-step-custom-click {
    top: 0;
    left: 0;
    width: 130px; // as per your need
    height: 72px; // as per your need
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}


<mat-step>
    <ng-template matStepLabel>
        <div class="mat-step-custom-click" (click)="justTesting()">
            <span>YOUR LABEL</span>
        </div>
    </ng-template>
</mat-step>


justTesting(){
   if( stepper.selectedIndex ){ // you can check stepper index
      let isValid = this.CheckValidations(yourData); // check your validations
      stepper.selected.completed = isValid;
      if( isValid ){
       doSomething(); // call your function
      }
   }
}

Answer 3

Step事件之后。这让我很痛苦。当您踏上新的一步并且想要触发一个事件时。执行以下操作。

添加（动画完成）

<mat-horizontal-stepper linear #stepper (animationDone)="selectionChange(stepper)">

此操作将在步骤完成后触发。并会为您提供新步骤的索引！

Answer 4

只是建议，请尝试使用ng-template或div代替span 我认为该事件正在触发。让我们尝试一次，让我知道。

错误表明类似ng-template的事件未触发。

<mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>

这是从您发送链接中复制Iam的示例。试试这个按钮

逐步onclick事件功能

4 个答案: