在* ngIf

Question

我试图在一个元素上定义一个模板变量，并使用它的hidden属性来识别该元素是否实际存在于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的{​​{1}}中使用editAccountBtn和ngIf来决定显示分隔符。

解决此问题的最佳方法是什么？我想避免处理组件代码。尝试用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的{​​{1}}内，则该值将为false。