javascript - การเพิ่มตัวจัดการเหตุการณ์ (click) โดยตรงไปที่ mat-step?

เป็นไปได้หรือไม่ที่จะเพิ่มตัวจัดการเหตุการณ์คลิกโดยตรงไปยังองค์ประกอบ mat-step?

ฉันพยายามเพิ่มหนึ่งไปที่ ขั้นตอนที่ 2 ในเดมอนี้ แต่ฉันไม่เห็นการคลิกถูกบันทึก:

โค้ดที่ฉันลอง:

HTML :

<mat-step label="Step 2" (click)="click()" optional>
 // Other stuff
</mat-step>

TS :

click() {
  console.log("CLICKED STEP 2")
}

Stackblitz Demo เพื่อจำลองพฤติกรรม

ปัญหาที่เกี่ยวข้องกับ Angular Material

https://github.com/angular/components/issues/18080

มันทำงานได้เฉพาะเมื่อทำขั้นตอนที่ 1 เสร็จแล้วเป็นจริง

คำตอบ #1

คุณสามารถใช้เหตุการณ์ (selectionChange) สำหรับแท็กพาเรนต์ซึ่งคือ mat-horizontal-stepper

HTML :

<mat-horizontal-stepper linear (selectionChange)="selectionChange($event)">
    <mat-step label="Step 1" [completed]="step1Complete">
        <h4>Step 1</h4>
        <button (click)="toggleStep1Complete()" mat-flat-button color="primary">{{ step1Complete === true ? "Toggle:Complete" : "Toggle:Incomplete"}}
</button>
        <div>
            <button mat-button matStepperNext>Next</button>
        </div>
    </mat-step>
    <mat-step label="Step 2" optional>
        <p>Step 2</p>
        <div>
            <button mat-button matStepperPrevious>Back</button>
            <button mat-button matStepperNext>Next</button>
        </div>
    </mat-step>
    <mat-step label="Step 3">
        <p>Step 3</p>
    </mat-step>
</mat-horizontal-stepper>

รหัส TS:

import { StepperSelectionEvent } from '@angular/cdk/stepper'; -- Better to use to get an intellisense about properties and available methods

selectionChange(event: StepperSelectionEvent) {
  console.log(event.selectedStep.label);
  let stepLabel = event.selectedStep.label;
  if (stepLabel == "Step 2") {
    console.log("CLICKED STEP 2");
  }
}

ตัวอย่างการทำงาน

แก้ไข :

หากคุณต้องการให้แต่ละขั้นตอนสามารถคลิกได้หรือผู้ใช้สามารถเข้าถึงได้ คุณต้องลบแอตทริบิวต์ linear ของ mat-horizontal-stepper หรือเพียงตั้งค่าเป็น false

เอกสารประกอบ