访问 *ngIf 中的模板变量

Posted 2023-02-22

【中文标题】访问 *ngIf 中的模板变量

【英文标题】：Access template variable in *ngIf

【发布时间】：2017-12-28 02:01:04

【问题描述】：

我试图在一个元素上定义一个模板变量，并使用它的 hidden 属性来识别该元素是否实际存在于 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 解决这个问题。

【参考方案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。

【讨论】：

我很好奇editAccountBtn 是如何在外面访问的。您提到的仅适用于具有结构属性的元素吗？解决我的问题的最佳方法是什么？

我不确定我是否清楚地问了这个问题。我想做的是<hr class="divider" *ngIf="!emailAccountBtn?.hidden">，这样我只能在按钮存在时显示分隔线。我不关心hr元素的变量。

感谢您花时间回复。为了清楚起见，我访问 editAccountBtn 没有问题，因为它没有任何结构指令。但是，无法访问 resendEmailBtn。我尝试在组件中为此添加 ViewChild，但这没有任何区别..

对不起，有点晚了。@ViewChild() 也只有在*ngIf 为true 时才可用，否则内容不存在且引用为空。你试过true

resendEmailBtn 位于一个正确的按钮上，我的意思是我可以看到该元素正在显示。