Угловой материал |Материал кнопки ведет себя по-разному, когда текст кнопки нажимается

Question

Рассмотрим следующий код:

HTML:

<button mat-flat-button id="test" (click)="toggle($event)">Click me!</button>

Компонент:

toggle(event) {
  let id: string = (event.target as Element).id;
  console.log(id)
  console.log(event.target)
}

Нажатие кнопки вызовет функцию toggle с событием в качестве параметра,Система зарегистрирует "test" (id) и событие кнопки.

При нажатии на текст на кнопке будет зарегистрирован неопределенный идентификатор и span с классом mat-button-wrapper

Вопрос: Если текст кнопкинажата я хочу получить цель события кнопки (а не цель события диапазона), как мне этого достичь?

Answer 1

Событие клика работает правильно.В JavaScript, когда событие инициируется в элементе источника, оно «всплывает» из источника и распространяется вверх по дереву элементов-предков.

Поэтому, когда у вас есть структура DOM, подобная этой:

<button mat-flat-button>
    <span>Click me!</span>
</button>

Событие щелчка на span будет распространяться вплоть до button по мере его всплытия до корня документа.

Если вы хотите удержать элемент кнопки, выможно использовать переменную ссылки на шаблон и передать ее в обработчик событий:

<button mat-flat-button id="test" #testButton (click)="toggle(testButton)">Click me!</button>

Answer 2

Вы можете передать элемент кнопки непосредственно в обработчик событий, присвоив кнопке ссылочную переменную шаблона:

<button mat-flat-button id="test" #button (toggle)="toggle(button._elementRef.nativeElement)">Click me!</button>

toggle(button) {
  console.log(button.id);
}

Вы также можете использовать цель события, и когда это не кнопка, посмотрите наего родитель (или родительский родитель в зависимости от того, что вы положили внутри кнопки):

toggle(event) {
  if (event.target instanceof HTMLButtonElement) {
    console.log(event.target.id);
  } else {
    console.log(event.target.parentElement.id);
  }
}