angular - 角度自定义模板插值用花括号中断

Question

我是 Angular 的新手，我找不到并回答我的问题。

我想更改 Angular 插值以使其与 Smarty 模板兼容，因此我将默认 ['{{','}}'] 更改为 ['[[',']]'] 或 ['[ ', ' ]'] 但如果模板包含以 { 开头的内容，我必须使用新的插值对其进行转义。

我创建了一个新应用

ng new new-app

然后我将 app.component.ts 装饰器编辑为：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  interpolation: ['[[',']]']
})
export class AppComponent {
  title = 'Hello World!';
}

然后我在 app.component.html 上添加了带有新插值的新变量

<h1>[*title*][[title]]{{title}}</h1>

我期望

<h1>[*title*]Hello World!{{title}}</h1>

但我收到一个 Angular 错误

Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("<h1>[*title*]Hello World!{{title}}</h1>

要解决这个问题，我需要更新模板

<h1>[*title*]Hello World![["{{"]]title}}</h1>

如果新插值是“[[”“]]”，为什么我必须转义“{{”？

标签： angularangular-templateangular-template-variable