добавить кнопку закрытия на метку mat-tab-label в angular-material 15

Question

Здравствуйте, я пишу приложение angular 15 с угловым материалом.

я использую новый(не устаревший) компонент для создания вкладок на моей странице, и я хочу, чтобы в заголовке вкладки была кнопка закрытия.

поэтому в компоненте, который я создалфункция:

      removeTab(index: number) {
    this.tabs.splice(index, 1);
  }

и в шаблоне я сделал следующее:

      <mat-tab-group>
  <mat-tab *ngFor="let tab of tabs; let index = index">
    <ng-template mat-tab-label>
      {{index}}
      <button (click)="removeTab(index)" mat-icon-button><mat-icon>close</mat-icon></button>
    </ng-template>
...

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

как я могу решить такую ​​​​вещь?

Answer 1

нашел ответ на Невозможно нажать кнопку в заголовке/ярлыке вкладки в Angular 15

мне нужно добавитьpointer-events:autoстиль к кнопке, а чем использовать$event.stopPropagation()поэтому он не перейдет на другую вкладку, если я закрою ее, сосредоточившись на какой-либо другой вкладке.

поэтому код кнопки теперь:

        <button style="pointer-events: auto"  (click)="removeTab(index);$event.stopPropagation()" mat-icon-button><mat-icon>close</mat-icon></button>

Answer 2

Когда вы нажимаете кнопку с крестиком, событие всплывает на элемент родительской вкладки, чтобы остановить его использование.event.stopPropagation();

Внесите следующие изменения:

      removeTab(event: PointerEvent, index: number) {
    console.log(event);
    event.stopPropagation();
    this.tabs.splice(index, 1);
  }

И,

      <button (click)="removeTab($event, index)" mat-icon-button>
        <mat-icon>close</mat-icon>
      </button>

Вы можете обратиться по этой ссылке: Ссылка