检查传递的元素是否被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']);
}
}

但这不起作用。

我尝试了元素。当然是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..
}