如何利用AST检测并提取Angular HTML模板中的变量？

完全可以通过@angular/compiler库解析AST来提取模板中的变量，你之前没找到相关标识，大概率是没遍历到正确的AST节点类型或表达式内部结构。以下是具体实现步骤和代码示例：

核心思路 #

Angular模板的AST包含多种节点类型，变量会出现在这些场景中：

• 插值表达式（如{{ foo }}）
• 属性/事件绑定（如[value]="bar"）
• 结构指令表达式（如*ngIf="value === true"）

需要递归遍历AST节点，同时深入解析表达式内部的标识符，才能完整收集所有变量。

实现代码 #

import { Lexer, Parser, TemplateAst, Interpolation, BoundExpression, StructuralDirective } from '@angular/compiler';

function extractTemplateVariables(template: string): string[] {
  const lexer = new Lexer();
  const parser = new Parser(lexer);
  // 解析模板生成AST
  const templateAst = parser.parse(template, {}) as TemplateAst[];
  const variables = new Set<string>();

  // 遍历模板AST节点
  function traverseNode(node: any): void {
    // 处理插值表达式
    if (node instanceof Interpolation) {
      node.expressions.forEach(expr => traverseExpression(expr));
    }
    // 处理属性绑定表达式
    if (node instanceof BoundExpression) {
      traverseExpression(node.ast);
    }
    // 处理结构指令的输入表达式
    if (node instanceof StructuralDirective) {
      node.inputs.forEach(input => traverseExpression(input.ast));
    }
    // 递归遍历子节点
    if (node.children) {
      node.children.forEach(child => traverseNode(child));
    }
  }

  // 遍历表达式AST，提取标识符（变量）
  function traverseExpression(expr: any): void {
    // 捕获标识符节点
    if (expr.name) {
      variables.add(expr.name);
    }
    // 处理二元表达式（如 a === b）
    if (expr.left) traverseExpression(expr.left);
    if (expr.right) traverseExpression(expr.right);
    // 处理属性访问（如 user.name）
    if (expr.expression) traverseExpression(expr.expression);
    // 处理函数调用参数
    if (expr.args) expr.args.forEach((arg: any) => traverseExpression(arg));
  }

  templateAst.forEach(node => traverseNode(node));
  return Array.from(variables);
}

// 测试示例
const testTemplate = `<div *ngIf="value === true">{{ foo }}</div>`;
console.log(extractTemplateVariables(testTemplate)); // 输出: ["value", "foo"]

关键说明 #

1. 节点类型识别：针对不同的变量出现场景，匹配对应的AST节点类（如Interpolation、StructuralDirective）
2. 表达式递归解析：像*ngIf="value === true"这种带逻辑的表达式，需要深入解析二元表达式的左右节点，才能提取出value变量
3. 去重处理：用Set存储变量，避免同一变量被多次收集

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