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 演示