訪問* 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元素上的模板變量都沒有返回值。

我最終想要做的是在ngIf of hr使用resendEmailBtn和editAccountBtn來決定顯示分隔符。

解決這個問題的最佳方法是什么？ 我想避免處理組件代碼。 嘗試用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時，它只有一個值。 如果它在評估為false的*ngIf ，則該值將為null 。