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

【问题标题】：How to create a boolean template variable in angular 2?如何在角度 2 中创建布尔模板变量？
【发布时间】：2023-03-29 22:49:02
【问题描述】：

我想通过单击一个按钮来显示或隐藏一个部分。我不想在控制器中创建变量。有没有办法通过使用本地模板变量（使用#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>

【问题讨论】：

标签： angular angular2-template

【解决方案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 未定义或为假值时，将设置为真，反之亦然。

这里正在工作Plunker。

【讨论】：

或者更短一点的(click)="showSection1 = !showSection1"
这将引发转译/编译错误，因为父组件上未定义 showSection1

【解决方案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] 根据此模板引用上的 value 指令的当前值添加或删除开放类。这适用于提前编译，并允许您将多余的变量排除在组件之外。但请谨慎使用，因为几乎作为一项规则，您不想在模板中定义变量。

【讨论】：

【解决方案3】：

你可以在下面使用，

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
   <label>
        <input type="checkbox" [(ngModel)]="showSection1" >
        Is Shown
    </label>
    <p *ngIf="showSection1">
      This should be shown or hidden on click of the button.
    </p>
  `
})
export class AppComponent { name = 'Angular'; }

这里是Plunker！！

希望这会有所帮助！

【讨论】：