如何在ngIf中访问Angular 2模板变量

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.