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

出力あなたは属性ngIfとwpHasAnyPermissionを含む要素のテンプレート変数の両方が値を返すされていない見ることができるように

rbtn: 
ebtn: false 
dline: 

です。私は最終的に何をしたいのか

は、分周器を表示するかを決定するhrのngIfに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に追加されたときのみ値を持ちます。 *ngIfがfalseと評価される場合、その値はnullになります。