如何訪問ngIf中的Angular 2模板變量

我想在一個元素上定義一個模板變量，並使用它的隱藏屬性來標識該元素是否實際存在於DOM中，然後基於此顯示另一個元素。但是如果有結構指令，模板變量似乎不會返回值。如何訪問ngIf中的Angular 2模板變量

<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解決這個問題。

來源

2017-07-21 TechCrunch

該變量在應用*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。

來源

2017-07-21 22:24:23

我很好奇'editAccountBtn'是如何在外面訪問的。你提到的僅適用於具有結構屬性的元素？什麼是解決我的問題的最好方法？ – TechCrunch

我更新了我的答案。 –

我不確定我是否清楚地問過這個問題。我想要做的只是當按鈕出現時，我才能顯示分隔符。「

'我不在乎'hr'元素的變量。 – TechCrunch

如何訪問ngIf中的Angular 2模板變量

回答

相關問題