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

Question

我似乎找不到我的问题的答案或正确的角度方式来做到这一点。我理解这部分是主观的。我有一个可点击的元素。在该元素内，我还有另一个可点击的元素：

    <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

就像$event.stopPropagation()通常在 javascript 中一样使用<div *ngIf="d.dliked" (click)="$event.stopPropagation();cantKeep()">...</div>好吧，我喜欢在同一个 .html 中，您可以将 $event 传递给函数 cantKeep 并在 .ts 中进行 stopPropagation<div *ngIf="d.dliked" (click)="cantKeep($event)">...</div>cantKeep(event){&nbsp; event.stopPropagation();&nbsp; ...rest of actions..}