Angular 12 字符串插值答案

【问题标题】：Angular 12 string interpolationAngular 12 字符串插值
【发布时间】：2023-02-20 21:51:19
【问题描述】：

应用程序通过 rest 调用从服务器接收一些数据。基于此响应，我们可以构建一些上下文对象和字符串。例子：

const contextObject = {name: 'World'};
const expression : string = 'Hello {{name}}';

所以最后我想要可以在 HTML 模板中绑定的“Hello World”字符串。

有人可以帮忙解释一下如何在 Angular 12 中评估这个表达式吗？

【问题讨论】：

【解决方案1】：

Angular 支持在运行时使用 JIT 进行模板评估。新的 Ivy 渲染器使用 AOT 编译器，只适合构建时使用。它也是默认管道。

我强烈建议避免包括编译器的运行时版本和在浏览器中创建模板，因为它非常慢。并且会显着增加您的捆绑包大小。

而是创建模板并在运行时评估它们。我建议创建您可以在需要时动态呈现的各种组件。

所以你最终会得到类似的东西：

Hello <Text [value]="contextObject.name"></Text>

如果您也在创建 RestAPI，则可以轻松地创建一个组件树，其中包含要传递的各种数据。

【讨论】：

【解决方案2】：

Template literals 在 JS 中使用反引号：

const contextObject = {name: 'World'};
const expression : string = `Hello ${contextObject.name}`;

【讨论】：