Angular 如何获取在ngif指令中调用函数的元素的id？

我需要获取在ngif指令中调用函数的元素的id

例如，我有一个带有id和ngif指令的按钮：

按钮

我需要在showId（）函数中获取此元素的id

另外，主要原因是不在函数中使用模板变量，以便此函数可以自动获取调用者

其思想是调用一个服务函数，该函数知道调用方是谁，并根据当前登录的用户来响应true或false。因为有一个巨大的重构要做，所以我们的想法不是将ID作为参数。

在模板中

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

---

第一个问题，你为什么有这样的要求

简单而正确的方法，在类中使用变量，并像这样使用它：

buttonId: string = "buttonId"

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

---

请参见此处的一个示例：

这是可行的，但我不希望将每个id复制到函数参数中，因为这样做行不通

ngIf

必须返回某个值，然后才会创建元素，因此会像以前一样创建引用名称，我不希望“showId（）”函数中有任何参数。所以我不能这样做，因为元素是在ngif指令return之后创建的？@ayyylmao如果您不需要任何参数，那么只需在方法中使用class变量，使用我答案的第一种方法，并在方法中访问class变量，如：

showId（）{console.log（this.buttonId）；//return something}

我认为当您使用

*ngIf

时，您无论如何都不能拥有它，除非您的

ngIf

返回true，否则没有元素，因此没有id属性。您能解释一下

*ngIf

依赖于它必须显示（或隐藏）的元素的id的背后的想法吗？我真的看不到这方面的有效用例。

buttonId: string = "buttonId"

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

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