---

name: angular-best-practices description: "Angular性能优化和最佳实践指南。在编写、审查或重构Angular代码以获得最佳性能、包大小和渲染效率时使用。" risk: safe source: self date_added: "2026-02-27"

Angular 最佳实践

Angular应用程序的综合性能优化指南。包含消除性能瓶颈、优化包和改善渲染的优先级规则。

何时使用

在以下情况参考这些指南：

• 编写新的Angular组件或页面
• 实现数据获取模式
• 审查代码的性能问题
• 重构现有Angular代码
• 优化包大小或加载时间
• 配置SSR/水合

---

规则类别（按优先级）

| 优先级 | 类别 | 影响 | 重点 | |--------|------|------|------| | 1 | 变更检测 | 关键 | Signals、OnPush、Zoneless | | 2 | 异步瀑布 | 关键 | RxJS模式、SSR预加载 | | 3 | 包优化 | 关键 | 懒加载、树摇 | | 4 | 渲染性能 | 高 | @defer、trackBy、虚拟化 | | 5 | 服务端渲染 | 高 | 水合、预渲染 | | 6 | 模板优化 | 中 | 控制流、管道 | | 7 | 状态管理 | 中 | Signal模式、选择器 | | 8 | 内存管理 | 低-中 | 清理、订阅 |

---

1. 变更检测（关键）

使用OnPush变更检测

// 正确 - OnPush + Signals
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<div>{{ count() }}</div>`,
})
export class CounterComponent {
  count = signal(0);
}

// 错误 - 默认变更检测
@Component({
  template: `<div>{{ count }}</div>`,
})
export class CounterComponent {
  count = 0;
}

使用Signals替代传统属性

// 正确
readonly items = signal<Item[]>([]);
readonly filteredItems = computed(() =>
  this.items().filter(i => i.active)
);

// 错误
items: Item[] = [];
get filteredItems() {
  return this.items.filter(i => i.active);
}

2. 异步瀑布（关键）

避免嵌套订阅

// 正确 - switchMap
this.route.params.pipe(
  switchMap(params => this.service.getData(params.id))
).subscribe(data => this.data.set(data));

// 错误 - 嵌套订阅
this.route.params.subscribe(params => {
  this.service.getData(params.id).subscribe(data => {
    this.data = data;
  });
});

3. 包优化（关键）

路由级懒加载

export const routes: Routes = [
  {
    path: 'dashboard',
    loadComponent: () => import('./dashboard/dashboard.component')
      .then(m => m.DashboardComponent)
  }
];

4. 渲染性能

使用@defer延迟加载

@defer (on viewport) {
  <heavy-component />
} @placeholder {
  <skeleton-loader />
}

trackBy优化列表

@for (item of items(); track item.id) {
  <item-card [item]="item" />
}