Проверьте, заключен ли переданный элемент в класс 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

просто используйте $event.stopPropagation(), как обычно, в javascript

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

Ну, мне нравится то же самое. html, вы можете передать событие $ в функцию cantKeep и сделать stopPropagation в .ts

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

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