Остановить выполнение других функций при нажатии Angular 5

Question

У меня есть таблица угловых материалов, каждая строка таблицы расширяется при нажатии

в последней ячейке, которую я динамически загружаю с помощью ComponentFactory загруженный компонент - это раскрывающийся список.

Проблема, с которой я столкнулся, заключается в том, что при нажатии на раскрывающийся список строка таблицы расширяется и сокращается.

Так я добавляю функцию к строкам

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;let index=index" (click)="expandRow(index, row)" #myRow></mat-row>

Это ячейка, в которую загружается пользовательское меню:

  <ng-container *ngIf="column === 'viewSelection'">
    <ng-container matColumnDef="viewSelection">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let row">
        <ng-container #sideMenu></ng-container>
        <!-- <user-side-menu></user-side-menu> -->
      </mat-cell>
    </ng-container>
  </ng-container>

Как загружается пользовательское меню, которое отлично работает:

  let sideMenu = this.sideMenu.toArray()
      for (let i = 0; i < sideMenu.length; i++) {
        const factory = this.resolver.resolveComponentFactory(this.ellipsis);
        let container = this.sideMenu.toArray()[i]

        const ellipsisComponent = container.createComponent(factory);
        ellipsisComponent.instance.data = this.returnedData[i]
        console.log(container, ellipsisComponent.data);

HTML для загруженного пользовательского меню:

<a aria-expanded="false" aria-haspopup="true" class="btn btn-icon has-dropdown" data-toggle="dropdown" id="grid-menu">
  <i class="ion-more"></i>
</a>
<div class="c-dropdown__menu dropdown-menu" aria-labelledby="grid-menu">
  <a class="c-dropdown__item dropdown-item" (click)="viewUser({Id:data?.Id}, $event);  $event.preventDefault()" >View/Edit User</a>
  <a *ngIf="data?.IsActive" class="c-dropdown__item dropdown-item" (click)="activeDeactivateUser(data?.Id, false);  $event.preventDefault()" data-toggle="modal" data-target="#deactivate-member">Deactivate User</a>
  <a *ngIf="!data?.IsActive" class="c-dropdown__item dropdown-item" (click)="activeDeactivateUser(data?.Id, true);  $event.preventDefault()" data-toggle="modal" data-target="#activate-member">Activate User</a>
</div>

Как вы видите, я использую функцию предотвращения дефолта, это ничего не делает, попробовал остановите распространение, но это останавливает выполнение функций, которые я хочу выполнить

Надеюсь, кто-то может указать мне правильное направление

Answer 1

Вам нужно использовать stopPropagation(), чтобы остановить передачу события в родительский DOM. Вы используете preventDefault(), чтобы остановить действие события по умолчанию для объекта события. Например, в случае элемента привязки действие щелчка по умолчанию заключается в открытии ссылки, поэтому, если вы хотите реализовать специальную проверку, которая предотвращает открытие ссылки при определенных условиях, вы можете использовать preventDefault() изнутри (click) функция обратного вызова для этого. Но если вы хотите остановить передачу события click родительскому элементу, вы должны использовать stopPropagation():

<span onclick="alert('You've already visited Stack Overflow')">
    <a href="https://stackoverflow.com" (click)="visitStack($event)">
        Stack Overflow
    </a>
</span>

stackVisited = false;
visitStack(event) {
    if (this.stackVisited) {
        event.preventDefault();
    } else {
        this.stackVisited = true;
        event.stopPropagation();
    }
}