Как получить идентификатор элемента, который вызывает функцию в директиве ngif?

Question

Мне нужно получить идентификатор элемента, который вызывает функцию внутри директивы ngif.

Например, у меня есть эта кнопка с идентификатором и директивой ngif:

<button id="buttonId" *ngIf="showId()">BUTTON</button>

Мне нужно получить идентификатор этого элемента внутри функции showId ()

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

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

Answer 1

Самый первый вопрос, почему у вас есть такое требование?

Простой и правильный способ, используйте переменную в своем классе и используйте ее следующим образом:

buttonId: string = "buttonId"

<button [id]="buttonId" *ngIf="showId(buttonId)">BUTTON</button>

Если вы хотитеиспользуйте *ngIf и хотите извлечь идентификатор, который присутствует в самом элементе, тогда не существует простого способа.Пока ваш *ngIf не вернет true, в DOM не будет создано никаких элементов, следовательно, нет атрибута id.Плохой обходной путь - иметь дубликат скрытого элемента, например:

<button hidden="true" #dupRef id="buttonId">Button</button>
<button id="buttonId" *ngIf="showId(dupRef.id)">BUTTON</button>

См. Пример здесь: https://stackblitz.com/edit/angular-sq8rde?file=src%2Fapp%2Fapp.component.html

Answer 2

в шаблоне

<button id="buttonId" #btnRef *ngIf="showId(btnRef.id)">BUTTON</button>

в компоненте

showId(buttonId){
     console.log(buttonId)
}