Zugriff auf Angular 2 Template-Variable in ngIf

Question

Ich versuche eine Template-Variable für ein Element zu definieren und benutze sein verstecktes Attribut, um zu identifizieren, ob das Element tatsächlich im DOM vorhanden ist und dann ein anderes Element darauf anzeigt. Wenn es jedoch eine strukturelle Anweisung gibt, scheint die Template-Variable keinen Wert zurückzugeben.

<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}} 

Ausgang ist

rbtn: 
ebtn: false 
dline: 

Wie Sie sowohl die Template-Variablen auf Elemente sehen können, enthält Attribute ngIf und wpHasAnyPermission sind keine Werte zurück.

Was will ich schließlich tun ist resendEmailBtn und editAccountBtn in ngIf von hr zu verwenden, um den Teiler zu entscheiden, anzuzeigen.

Was ist der beste Weg, dies zu lösen? Ich möchte vermeiden, mit Komponentencode zu arbeiten. Versuchen Sie, dies in HTML zu lösen.

Answer 1

Die Variable ist außerhalb des Elements *ngIf nicht verfügbar.

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

wird von

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

und divi ist nur verfügbar, im <template> Element ersetzen werden.

Sie können

@ViewChild('editAccountBtn') editAccountBtn:ElementRef; 

an Ihre Komponenten-Klasse hinzufügen, um es innerhalb der gesamten Komponenten-Vorlage zur Verfügung zu stellen. Es hat nur einen Wert, wenn das abgefragte Element zum DOM hinzugefügt wird. Wenn es in einem *ngIf ist, der false auswertet, wird der Wert null sein.