Angular 點擊事件在另一個點擊事件中

Question

我的頁面中有以下設置

當我單擊一個部門的主框時，它會被選中，然后部門和團隊會在右側的選項卡中更新。 但是，我還想單擊編輯圖標來編輯部門的名稱。

因為編輯點擊事件在 select 分割點擊事件中，所以當我點擊編輯時，這兩個事件都會被觸發。

解決方案是什么？ 如何單擊編輯按鈕並僅觸發該事件而不觸發 select 除法事件？ 我必須將它移到 html 之外然后相對 position 嗎？ 有沒有更好的辦法？

<div class="divisionList">
   <div *ngFor="let division of filteredDivisions" (click)="selectDivision(division)"
       <form [formGroup]="formDivision" fxLayout="row" class="divisionForm">
           <h4 *ngIf="!isDivisionNameBeingEdited(division)">{{division.name}}</h4>
              <input matInput #editTitle (change)="submit()"
                  *ngIf="isDivisionNameBeingEdited(division)" class="mrmd titleInput"
                    id="title2" formControlName="division" />
            <div fxFlex></div>
            <mat-icon (click)="editDivisionName(division)">edit</mat-icon>
        </form>
    </div>
</div>
                                   

Answer 1

這是在 JavaScript 中處理點擊事件的方式。 它們“冒泡”或通過父元素向上傳播。 您需要處理該事件並明確告訴它不要向上傳播元素鏈。

<div class="divisionList">
   <div *ngFor="let division of filteredDivisions" (click)="selectDivision(division)"
       <form [formGroup]="formDivision" fxLayout="row" class="divisionForm">
           <h4 *ngIf="!isDivisionNameBeingEdited(division)">{{division.name}}</h4>
              <input matInput #editTitle (change)="submit()"
                  *ngIf="isDivisionNameBeingEdited(division)" class="mrmd titleInput"
                    id="title2" formControlName="division" />
            <div fxFlex></div>
            <mat-icon (click)="editDivisionName($event, division)">edit</mat-icon>
        </form>
    </div>
</div>

在.ts文件中

editDivisionName($event: MouseEvent, division) {
    $event.stopPropogation();
}

StackBlitz 演示