javascript - 检查传递的元素是否被类 Angular 8 封装
问题描述
我似乎找不到我的问题的答案或正确的角度方式来做到这一点。我理解这部分是主观的。我有一个可点击的元素。在该元素内,我还有另一个可点击的元素:
<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"
解决方案
就像$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)
{
event.stopPropagation();
...rest of actions..
}
推荐阅读
- django - TypeError: unsupported operand type(s) for /: 'str' and 'str' django setting.py
- javascript - 如何从提醒时间找到前一小时和后一小时
- dask - Dask 工作人员在缺少 dep 密钥后挂起
- javascript - 获取表中某一列的所有值
- time-complexity - 通过约简确定解的时间复杂度
- postgresql - 将 postgresql 表转换为 xml
- xml - VB Create .conf 不存在或读取 XML
- java - `CompletableFuture.completedFuture ... thenAccept`是否等同于顺序处理?
- python - 对具有字母数字值的字符串数组进行排序(Python3)
- c# - 返回一个函数
使用块的中间