如何创建Angular模板变量？复用isDisabled返回值减少重复调用

一、复用isDisabled(product)的返回值，避免重复调用 #

你提到isDisabled()内部逻辑复杂，重复调用不仅冗余还可能影响性能，这里有两种实用的解决方案：

方案1：模板层面用*ngIf + as语法（最便捷） #

利用Angular的*ngIf可以将表达式结果赋值给模板变量的特性，搭配ng-container（不会生成额外DOM元素），一次性计算状态后全局复用：

<div *ngFor="let product of prodList">
  <!-- 用ng-container包裹，将isDisabled的结果存到isProdDisabled变量里 -->
  <ng-container *ngIf="isDisabled(product) as isProdDisabled">
    <button [disabled]="isProdDisabled">按钮1</button>
    <button [disabled]="isProdDisabled">按钮2</button>
    <button [disabled]="isProdDisabled">按钮3</button>
    <button [disabled]="isProdDisabled">按钮4</button>
    <button [disabled]="isProdDisabled">按钮5</button>
  </ng-container>
</div>

这样isDisabled(product)只会在每个循环项里调用一次，所有按钮直接复用isProdDisabled变量的值，完全避免重复计算。

方案2：组件类预处理状态映射（适合组件内也需使用该状态的场景） #

如果除了模板外，组件逻辑也需要用到产品的禁用状态，可以在组件类提前计算并存储每个产品的状态：

import { Component, OnInit } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  prodList: Product[] = []; // 假设这是你的产品列表
  productDisabledStatus = new Map<Product, boolean>(); // 存储每个产品的禁用状态

  ngOnInit() {
    // 初始化时生成状态映射
    this.updateDisabledStatus();
  }

  // 当prodList发生变化（比如异步加载、更新）时，调用此方法更新状态
  updateDisabledStatus() {
    this.productDisabledStatus.clear();
    this.prodList.forEach(product => {
      this.productDisabledStatus.set(product, this.isDisabled(product));
    });
  }

  isDisabled(product: Product): boolean {
    // 你的复杂计算逻辑
    return /* 计算结果 */;
  }
}

然后模板里直接从映射中取值：

<div *ngFor="let product of prodList">
  <button [disabled]="productDisabledStatus.get(product)">按钮1</button>
  <button [disabled]="productDisabledStatus.get(product)">按钮2</button>
  <!-- 其他按钮 -->
</div>

这种方式状态只计算一次，变更检测时不会重复执行复杂逻辑，性能更优。

二、如何创建Angular模板变量 #

Angular模板变量用#变量名或ref-变量名语法定义，作用域为定义它的元素及其子元素，常见使用场景如下：

1. 给DOM元素创建变量 #

可直接引用DOM元素的属性或方法：

<!-- 给input定义模板变量 -->
<input #usernameInput type="text" placeholder="输入用户名">
<!-- 在按钮点击事件中使用变量获取input的值 -->
<button (click)="console.log(usernameInput.value)">打印输入值</button>

2. 给子组件创建变量 #

可直接调用子组件的方法或访问其属性：

<!-- 给子组件定义模板变量 -->
<app-product-card #productCard [product]="selectedProduct"></app-product-card>
<!-- 通过变量调用子组件的方法 -->
<button (click)="productCard.addToCart()">加入购物车</button>

3. 结合指令存储表达式结果（如*ngIf） #

就像第一个问题里用到的as语法，把表达式结果存为模板变量：

<!-- 将getUser()的返回值存到user变量中 -->
<div *ngIf="getUser() as user">
  欢迎你，{{user.nickname}}！
</div>

4. 给ng-template创建变量 #

用于复用模板片段：

<!-- 定义模板变量 -->
<ng-template #loadingTip>
  <div class="loading">加载中...</div>
</ng-template>

<!-- 使用模板变量渲染模板 -->
<ng-container *ngTemplateOutlet="loadingTip"></ng-container>

注意：模板变量是局部作用域的，如果在*ngFor循环里定义，每个循环项的变量都是独立的，不会互相干扰。

内容的提问来源于stack exchange，提问作者matchi