javascript - 检查传递的元素是否被 Angular 8 类封装

Question

我似乎找不到问题的答案或正确的 Angular 方法来做到这一点。我知道这部分是主观的。我有一个可点击的元素。在该元素内，我还有另一个可单击的元素:

    <li (click)="route($event, d, d.isdliked)" *ngFor="let d of dList; let i = index">
        <div class="image-container" [ngStyle]="{ 'background-image': 'url(' + d.ImagePath + ')'}">
            <div class="keep-container">
                <div *ngIf="d.dliked" (click)="cantKeep()" class="liked">
                    <p>{{d.dLikes}}</p>
                </div>
                <div *ngIf="!d.dliked" (click)="keep(d, i)" class="not-liked">
                    <p>{{d.dLikes}}</p>
                </div>
            </div>
        </div>
    </li>

因此 li 元素中的第一次点击事件会将用户路由到另一个页面。另一个点击事件不会路由到任何地方。但是，如果我单击这两个内部单击事件，当我不想这样做时，我就会被路由到其他页面。

所以我尝试了这一点代码来检查单击的元素是否包含“keep-container”类:

  route(element: Element, d: D, dIsLiked: boolean): void {
    if (!element.classList.contains("keep-container")) {
      this.router.navigate(['/dinfo']);
    }
  }

但这不起作用。

我当然尝试过 element.target 但没有成功。我究竟做错了什么？我会继续寻找。

主要目标:如果我点击 p 标签 <p>{{d.dLikes}}</p>我想检查它是否在类内 "keep-container"

Answer 1

只需像通常在 javascript 中一样使用 $event.stopPropagation()

<div *ngIf="d.dliked" (click)="$event.stopPropagation();cantKeep()">...</div>

嗯，我喜欢在同一个.html中，您可以将$event传递给函数cantKeep并在.ts中进行stopPropagation

<div *ngIf="d.dliked" (click)="cantKeep($event)">...</div>

cantKeep(event)
{
  event.stopPropagation();
  ...rest of actions..
}