如何在角度2中创建布尔模板变量？

Question

我想通过单击按钮来显示或隐藏部分.我不想在控制器中创建变量.有没有办法通过使用本地模板变量(使用#variableName)来做到这一点？

我在想下面的事情.但为此,我得到了template parse error.

  <button color="primary" #showSection1="true" (click)="!showSection1;">Toggle</button>
  <p *ngIf="showSection1">
    This should be shown or hidden on click of the button.
  </p>

Answer 1

你不能这样做,因为模板变量button在你声明它时会存储整个元素,但你可以在这里利用三元运算符:

<button (click)="showSection1 ? showSection1 = false : showSection1 = true;">Toggle</button>
<p *ngIf="showSection1">
    This should be shown or hidden on click of the button.
</p>

如果showSection1未定义或具有错误值,则将其设置为true,反之亦然.

这是工作的Plunker.

Answer 2

如果您想以适用于 AOT（生产）编译的方式执行此操作，我建议使用模板引用变量。对于我的示例，我希望open在关闭元素时将该类应用于我的元素，并在再次单击该元素时将其删除。基本上，我想切换open我的元素上的类。在我看来，将此状态数据存储在我的 component.ts 文件中很丑陋。

为了实现这一目标，我执行以下操作。

<li class="tagTag" 
  *ngFor="let tag of tagCategory.tags"
  [ngClass]="{'open': toggle.value}" 
  #toggle [value]="false" 
  (click)="toggle.value = !toggle.value">...</li>

将实例#toggle存储<li>为名为“toggle”的模板引用变量。然后我使用该value指令并为其赋予值false。使用单击处理程序，我将 value 指令的值设置在 true 和 false 之间。我[ngClass]根据此模板引用上值指令的当前值添加或删除开放类。这与提前编译一起使用，并允许您将多余的变量保留在组件之外。但请谨慎使用，因为通常您不想在模板中定义变量。