Angular模板增强：轻松使用无标签模板字符串

Angular 最新发布的 19.2.0-next.0 版本带来了开发人员会喜欢的强大功能：支持在表达式中使用未标记的模板字符串。此功能使Angular模板更具灵活性和表达力，使开发人员能够编写更干净、简洁且动态的模板，无需额外的工作绕路。让我们看看这代表什么以及如何在您的应用程序中利用这个新功能。

主要用例：

这里有一些实际的例子，说明未标记的模板字符串如何使Angular模板更简洁。

1. 动态更新的内容

你可以直接把这些动态表达嵌入到你的模板中，等

    <p>信息：{{ `你好，${name}，这里是${value}` }}</p>

2. 动态类型（Dynamic Classes）.

动态生成类名从未这么简单。

    <p class="{{ `foo-${postfix}` }}">自定义样式</p>  

    <p [class]=`foo-${postfix}`>自定义样式</p>

这里的代码展示了如何使用自定义样式

这两个例子都实现了相同的效果：根据postfix的值来动态分配类名称。

3. 带有多個表达式的插值

轻松应对更复杂的插值问题：

<p>包含插值：{{ `你好${name}！现在是${timeOfDay}！` }}</p>

4. 管道符和模板字面量

模板字面量表达式也可以与 Angular 管道结合。

    <p>管道处理如下：{{ `hello ${name}` | uppercase }}（代码示例，管道处理为大写）</p>

在这种情况下，整个模板文字经过 uppercase 处理，将其转换成大写形式。

5. 动态URLs.

（动态网址）

简化图片或其他资源的动态 URL 生成，怎么样？

    <img [src]="`${base}/600x400`" />

6. 带有模板字符串的循环

您可以甚至在 Angular 的结构指令（如 @for）中使用未标记的模板字符串。

@for(n of [1,2,3]; track $index) {  
  <button [attr.data-id]=`${n}-button`>{{ `点击${n}` }}</button>  
}

这允许动态呈现重复内容，这样可以直接把值嵌入字符串里。

关注我在 Medium 上或在 Twitter 阅读更多关于 Angular 和 JS 的内容。