Angular2如何实现类似PHP中$$a的变量间接引用功能？

嘿，这个需求我之前也碰到过～直接在模板里写{{foo2}}肯定拿不到'string'的，因为foo2本身就是字符串'foo'，模板只会原样渲染它。不过咱们可以通过下面的方法实现类似PHP$$a的动态取值效果：

核心思路：把常量挂载到组件的对象属性中 #

Angular模板只能直接访问组件实例上的公共属性，而且它不会自动把字符串解析成变量名。所以我们需要把要动态访问的常量放到一个对象里，然后通过对象的方括号属性访问语法来实现动态取值。

举个具体的例子：

// 你的组件类代码
import { Component } from '@angular/core';

// 定义你的常量
const foo = 'string';
const bar = 'string2';

@Component({
  selector: 'app-your-component',
  template: `
    <!-- 这里就能拿到'string'啦 -->
    {{ constants[foo2] }}
  `
})
export class YourComponent {
  // 把常量打包成组件的公共对象属性
  constants = {
    foo,
    bar
  };
  // 你的变量
  foo2 = 'foo';
}

为什么要这么做？ #

• Angular模板的表达式上下文是组件实例，它不会像PHP那样解析字符串对应的变量名，{{foo2}}只会渲染foo2变量本身的值（也就是'foo'）。
• 把常量放到对象里后，constants[foo2]就相当于constants['foo']，自然就能拿到对应的常量值'string'了。

如果你的常量是在其他文件里定义的，只要确保组件能导入它们，然后同样放到constants对象里就行啦～

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