Блог

Я ищу решение для поддержки щелчка по строке и действия как отдельной функции в таблице angular material.

Я пробовал следовать:

https://stackblitz.com/edit/angular-minimal-material-table-action-buttons-omoogj

Я хотел бы достичь этих функций:

1. по щелчку строки я хотел бы перейти на другую страницу с подробным URL-адресом
2. при нажатии на действие редактирования я хотел бы открыть другой URL-адрес.

Проблема: я не могу отличить щелчок по строке от щелчка по элементам действия, поскольку оба они попадают в одну и ту же строку.

Есть ли кто-нибудь найденные решения для этого или angular material поддерживает такое поведение?

текущее поведение:

Если я правильно понимаю, что вы ищете, это Event.stopPropagation() .

Попробуйте реализовать это так:

 <a mat-icon-button (click)="$event.stopPropagation()">
  <mat-icon>edit</mat-icon>
</a>
 

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

Вы должны остановить распространение события.

     <a mat-icon-button (click)="edit($event)">
        <mat-icon>edit</mat-icon>        
      </a>
 

 
  edit(e) {
    e.stopPropagation();
    console.log('edit');
  }