访问* ngIf中的模板变量

Question

我试图在元素上定义模板变量并使用其隐藏属性来识别元素是否实际存在于DOM中，然后基于该元素显示另一个元素。但是如果有结构指令，模板变量似乎不会返回值。

<hr class="divider" *ngIf="true" #divi>
<div *ngIf="showResendWelcomeEmailButton">
  <a *wpHasAnyPermission="[{'something': true}]" 
     #resendEmailBtn>
    Resend Welcome Email
  </a>
</div>
<div class="pull-right">
  <a #editAccountBtn>Edit Account Details</a>
</div>

rbtn: {{resendEmailBtn?.hidden}}
ebtn: {{editAccountBtn?.hidden}}
dline: {{divi?.hidden}}

输出是

rbtn:
ebtn: false
dline: 

正如您所看到的，包含属性ngIf和wpHasAnyPermission的元素上的模板变量都没有返回值。

我最终要做的是在resendEmailBtn的editAccountBtn中使用ngIf和hr来决定显示分隔符。

解决这个问题的最佳方法是什么？我想避免处理组件代码。尝试用HTML解决这个问题。

Answer 1

该变量在应用*ngIf的元素之外不可用。

<hr class="divider" *ngIf="false" #divi>

将被取代

<template let-divi [ngIf]="false">
  <hr class="divider"  >
</template>

和divi只能在<template>元素中使用。

你可以加

@ViewChild('editAccountBtn') editAccountBtn:ElementRef;

到您的组件类，使其在整个组件模板中可用。当查询的元素添加到DOM时，它只有一个值。如果它在*ngIf内评估为false，则该值将为null。