如何在Angular模板表达式中简洁使用Signal并引入模板变量？

基础代码示例 #

组件逻辑 #

interface Point {
  x: number;
  y: number;
}

@Component(...)
class PointComponent {
  point = signal<Point>({x: 0, y: 0});
}

当前已用模板写法 #

• 借助@if控制流声明模板变量：

@if(point(); as point) {
  <pre> x: {{point.x}}, y: {{point.y}} </pre>
}

• 直接调用Signal获取属性：

<pre> x: {{point().x}}, y: {{point().y}} </pre>

更简洁的实现方式 #

1. @let语法（Angular 17+） #

这是Angular 17引入的专门用于模板变量声明的语法，无需依赖控制流块，写法最直接：

@let point = point();
<pre> x: {{point.x}}, y: {{point.y}} </pre>

这种方式完全规避了@if的额外逻辑，直接在模板中声明变量存储Signal的值，是纯模板层面的最优解。

2. 组件内派生属性 #

如果需要在模板中多次复用该Signal的值，可以在组件类中定义一个只读属性：

// 在PointComponent类中添加
get currentPoint() {
  return this.point();
}

模板中直接使用：

<pre> x: {{currentPoint.x}}, y: {{currentPoint.y}} </pre>

3. 自定义解包管道（复用场景） #

如果多个组件都需要处理Signal解包，可以封装一个简单管道：

@Pipe({name: 'unwrap', standalone: true})
export class UnwrapSignalPipe implements PipeTransform {
  transform<T>(signal: Signal<T>): T {
    return signal();
  }
}

模板中结合变量使用：

@let point = point | unwrap;
<pre> x: {{point.x}}, y: {{point.y}} </pre>

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