首页 文章

访问* ngIf中的模板变量

提问于
浏览 次
6

我试图在元素上定义模板变量并使用其隐藏属性来识别元素是否实际存在于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 hr 中使用 resendEmailBtn 和 editAccountBtn 来决定显示分隔符 .

解决这个问题的最佳方法是什么？我想避免处理组件代码 . 尝试用HTML解决这个问题 .

angular angular-directive angular-template

1 回答

  • 5

    该变量在应用 *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 .

    回复于

相关问题