Angular 5及2+版本如何将插值符号改为[[ ]]？

嘿，刚好我之前折腾过这个！在Angular 2+系列版本里，自定义插值符号的逻辑和AngularJS 1.x的$interpolateProvider不一样，但实现起来并不复杂，下面给你一步步说清楚：

核心实现步骤 #

你需要在项目的根模块（通常是AppModule）里配置对应的令牌，全局替换默认的{{ }}为[[ ]]：

1. 首先在根模块文件顶部导入所需的令牌和依赖：

import { NgModule, INTERPOLATION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

2. 接着在@NgModule的providers数组中添加配置项，指定自定义的插值符号：

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    { provide: INTERPOLATION, useValue: ['[[', ']]'] }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

注意事项 #

• 这个配置是全局生效的，整个应用内的插值表达式都会使用[[ ]]，比如你之前写的{{ userName }}现在要改成[[ userName ]]。
• 如果你用的是Angular 14及更新版本，INTERPOLATION令牌已经被标记为过时（deprecated），官方推荐使用APP_INTERPOLATION替代，用法几乎一致，只需要把导入和配置里的令牌换成APP_INTERPOLATION就行。不过你用的是Angular 5，安心用INTERPOLATION就好。
• 目前Angular不支持给单个组件单独设置不同的插值符号，如果有这种需求，只能通过自定义管道或者其他方式变通实现。

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