如何在PUG中实现Angular 17新增的@for与@if语法？

你遇到的错误是因为Pug默认把@开头的语句识别为**混合宏（mixin）**的定义/调用，所以直接写@for(会触发Pug的语法解析错误——不需要等Pug更新版本，用以下几种方法就能解决：

• 反斜杠转义@符号：在@前加\，告诉Pug不要解析这个@，直接原样输出给Angular处理，适合嵌套结构：

  div.container
    \@for(item of productList) {
      div.product-card {{ item.title }}
    }
    \@if(isLoggedIn) {
      button 退出登录
    }
  

• 管道符直接输出语法行：用|前缀让Pug直接输出整行Angular控制流代码，适合简单的结构：

  | @for(item of items; track item.id) {
  li {{ item.text }}
  | }
  

• 单标签属性式写法：如果是在单个标签上使用控制流，可以把@语法写在标签的属性位置，适合极简场景：

  div(\@for="item of items") {{ item.name }}
  

需要注意的是，Angular的新控制流语法是在模板编译阶段处理的，只要Pug能把@for/@if代码正确输出到最终的模板文件中，Angular就能正常识别并编译。

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