如何在Angular2+ HTML模板中直接执行JavaScript代码（如JSON.parse）

Angular模板的上下文是组件实例，默认不能直接访问全局JavaScript对象（比如JSON、window）——这就是你遇到Property 'JSON' does not exist on type 'AppComponent'错误的原因，模板只能调用组件类里定义的属性和方法，全局对象不在这个上下文范围内。

不过有几种办法能实现你想要的效果：

• 把全局对象挂载到组件实例
  在你的AppComponent类里添加一行代码，把全局JSON绑定到组件属性上：

  export class AppComponent {
    JSON = JSON; // 将全局JSON对象暴露给模板
  }
  

  之后模板里原来的写法<p>{{ JSON.parse(['\u2013'])[0] }}</p>就能正常运行了。

• 封装组件方法
  更符合Angular组件封装思路的做法是，在组件里定义专门的处理方法，模板调用这个方法：

  export class AppComponent {
    getParsedValue(value: any) {
      return JSON.parse(value)[0];
    }
  }
  

  模板里改成：

  <p>{{ getParsedValue(['\u2013']) }}</p>
  <!-- 或者用innerHTML绑定 -->
  <p [innerHTML]="getParsedValue(['\u2013'])"></p>
  

• 自定义管道（复用场景）
  如果多个组件都需要类似的解析逻辑，推荐自定义一个管道：

  import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({ name: 'jsonParseFirst' })
  export class JsonParseFirstPipe implements PipeTransform {
    transform(value: any): any {
      return JSON.parse(value)[0];
    }
  }
  

  记得在你的NgModule里声明这个管道，之后模板里就能这样用：

  <p>{{ ['\u2013'] | jsonParseFirst }}</p>
  

虽然挂载全局对象能快速解决问题，但更推荐用组件方法或管道的方式，代码更易维护、测试，也更贴合Angular的设计理念。

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