如何在Angular模板中高效使用Signal管理对象？

在Angular里，当Signal存储的是对象类型时，两种常见的属性访问方式各有优劣，具体选择取决于你的场景：

1. 直接调用Signal访问属性（user().id） #

这是通用且无额外副作用的首选方式，理由如下：

• 无冗余结构：不需要额外的ng-container和条件判断，模板更简洁
• 性能有保障：Angular对Signal的多次调用做了高度优化——同一个Signal的多次取值（比如user().id和user().username）会复用缓存的当前值，不会重复执行计算，完全不用担心性能问题
• 语法直接：简单场景下书写更高效

注意：如果Signal可能返回null或undefined，需要添加空值保护，比如 {{ user()?.id }} 避免模板报错。

示例代码：

// 组件类
user = signal<User>({ id: 1, username: 'user' });

<!-- 模板 -->
{{ user().id }}
{{ user().username }}

2. 使用ng-container *ngIf简化访问 #

这种方式适合特定场景，但并非通用首选：

• 优势：
  • 可读性更强，多次访问对象属性时不需要重复写user()
  • 自动处理空值：如果Signal值为null/undefined，模板内容会被隐藏，避免空值报错
• 劣势：
  • 引入了额外的模板包装器，增加了模板结构复杂度（虽然不会渲染到DOM）
  • 额外的条件判断会带来冗余逻辑，如果Signal始终有值，这个判断完全没必要
  • 频繁变更的Signal值可能触发*ngIf的重复评估，带来微小的性能开销（通常可忽略）

示例代码：

<ng-container *ngIf="user() as user">
  {{ user.id }}
  {{ user.username }}
</ng-container>

额外优化方案：派生Signal #

如果需要多次访问对象的多个属性，且不想重复写user()，还可以在组件类中创建派生Signal：

// 组件类
user = signal<User>({ id: 1, username: 'user' });
userId = computed(() => this.user().id);
username = computed(() => this.user().username);

<!-- 模板 -->
{{ userId() }}
{{ username() }}

这种方式在复杂组件中更利于维护，同时保持模板的简洁性。

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