如何在Angular的TS代码中读取组件输入绑定的表达式字符串值

Angular 运行时默认不会将模板中绑定的原始表达式字符串暴露给组件实例，常规@Input装饰器只能拿到表达式求值后的结果，无法直接获取原始表达式文本。以下是3种可行的实现方案：

方案1：新增额外输入参数（生产环境推荐） #

直接新增一个输入参数让使用方主动传入表达式字符串，实现最简单无兼容性问题：

// 组件TS代码
@Input() value: string;
// 新增表达式入参
@Input() valueExpr: string;

ngOnInit() {
  console.log(this.valueExpr); // 输出 user.Name
}

使用组件时按如下方式传参即可：

<mycomponent [(value)]="user.Name" valueExpr="user.Name" />

方案2：通过私有API读取元数据（仅适合开发调试场景） #

JIT编译模式下可以通过Angular内部私有API读取模板元数据拿到原始表达式，注意该方案不兼容AOT生产编译，且依赖的私有API随时可能在版本升级后失效：

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

@Component({
  selector: 'mycomponent',
  template: `<input type="text" [(ngModel)]="value"/>`
})
export class MyComponent implements OnInit {
  @Input() value: string;

  constructor(private viewContainerRef: ViewContainerRef) {}

  ngOnInit() {
    // 仅JIT模式生效，AOT模式下元数据会被编译清理
    const hostView = (this.viewContainerRef as any)._hostView;
    const componentNodeDef = hostView?.def?.nodes?.find(
      node => node?.element?.name === 'mycomponent'
    );
    const rawExpression = componentNodeDef?.bindings?.find(
      binding => binding.propName === 'value'
    )?.expression?.source;
    console.log(rawExpression); // 输出 user.Name
  }
}

方案3：调整组件设计为传数据源+字段名（表单/元数据类组件推荐） #

如果是做表单、低代码这类需要字段元数据的组件，可以调整设计，不直接接收字段值，改为接收数据源对象和字段名，天然就能拿到字段标识：

// 组件TS代码
@Input() data: Record<string, any>;
@Input() field: string;

// 封装双向绑定逻辑
get value() {
  return this.data[this.field];
}
set value(newVal) {
  this.data[this.field] = newVal;
}

ngOnInit() {
  console.log(this.field); // 输出 Name，如需完整路径可再加prefix参数拼接
}

使用方式如下：

<mycomponent [data]="user" field="Name" [(value)] />

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