Angular 最佳实践

// 正确 - 使用 Signals 的 OnPush
@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 触发精确更新
@Component({
  template: 
    <h1>{{ title() }}</h1>
    <p>Count: {{ count() }}</p>
  ,
})
export class DashboardComponent {
  title = signal("Dashboard");
  count = signal(0);
}
// 错误 - 可变属性需要 zone.js 检查
@Component({
  template: 
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
  ,
})
export class DashboardComponent {
  title = "Dashboard";
  count = 0;
}

// main.ts - Zoneless Angular (v20+)
bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()],
});

// 错误 - 嵌套订阅创建了瀑布流
this.route.params.subscribe((params) => {
  // 1. 等待参数
  this.userService.getUser(params.id).subscribe((user) => {
    // 2. 等待用户数据
    this.postsService.getPosts(user.id).subscribe((posts) => {
      // 3. 等待文章数据
    });
  });
});
// 正确 - 使用 forkJoin 并行执行
forkJoin({
  user: this.userService.getUser(id),
  posts: this.postsService.getPosts(id),
}).subscr

### 避免 SSR 中的客户端级联请求 (Waterfalls)

---

3. 包体积优化 (至关重要)
路由懒加载

### 对重量级组件使用 @defer

### 避免 Barrel 文件的重新导出 (Re-exports)

### 动态导入第三方库

---

4. 渲染性能 (高优先级)
在 @for 中始终使用 trackBy

### 对大列表使用虚拟滚动 (Virtual Scrolling)

### 优先使用纯管道 (Pure Pipes) 而非方法

ems(); track item.id) { ... }

// 正确 - 使用 Computed，直到依赖项更改才重新计算（带缓存）
export class ProductStore {
  products = signal<Product[]>([]);
  filter = signal('');
filteredProducts = computed(() => {
    const f = this.filter().toLowerCase();
    return this.products().filter(p =>
      p.name.toLowerCase().includes(f)
    );
  });
}
// 错误 - 每次访问都会重新计算
get filteredProducts() {
  return this.products.filter(p =>
    p.name.toLowerCase().includes(this.filter)
  );
}

// app.config.ts
import {
  provideClientHydration,
  withIncrementalHydration,
} from "@angular/platform-browser";
export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(withIncrementalHydration(), withEventReplay()),
  ],
};

<!-- 关键的首屏内容 -->
<app-header />
<app-hero />
<!-- 屏下内容，通过注水触发器延迟加载 -->
@defer (hydrate on viewport) {
<app-product-grid />
} @defer (hydrate on interaction) {
<app-chat-widget />
}

@Injectable({ providedIn: "root" })
export class DataService {
  private http = inject(HttpClient);
  private transferState = inject(TransferState);
  private platformId = inject(PLATFORM_ID);
getData(key: string): Observable<Data> {
    const stateKey = makeStateKey<Data>(key);
if (isPlatformBrowser(this.platformId)) {
      const cached = this.transferState.get(stateKey, null);
      if (cached) {
        this.transferState.remove(stateKey);
        return of(cached);
      }
    }
return this.http.get<Data>(/api/${key}).pipe(
      tap((data) => {
        if (isPlatformServer(this.platformId)) {
          this.transferState.set(stateKey, data);
        }
      }),
    );
  }
}

<!-- 正确 - 新控制流（速度更快，包体积更小） -->
@if (user()) {
<span>{{ user()!.name }}</span>
} @else {
<span>Guest</span>
} @for (item of items(); track item.id) {
<app-item [item]="item" />
} @empty {
<p>No items</p>
}
<!-- 错误 - 旧版结构指令 -->
<span *ngIf="user; else guest">{{ user.name }}</span>
<ng-template #guest><span>Guest</span></ng-template>

// 正确 - 在组件中预先计算
class Component {
  items = signal<Item[]>([]);
  sortedItems = computed(() =>
    [...this.items()].sort((a, b) => a.name.localeCompare(b.name))
  );
}
// 模板
@for (item of sortedItems(); track item.id) { ... }
// 错误 - 每次渲染都在模板中进行排序
@for (item of items() | sort:'name'; track item.id) { ... }

// 正确 - 选择性订阅
@Component({
  template: <span>{{ userName() }}</span>,
})
class HeaderComponent {
  private store = inject(Store);
  // 仅在 userName 更改时重新渲染
  userName = this.store.selectSignal(selectUserName);
}
// 错误 - 订阅整个状态
@Component({
  template: <span>{{ state().user.name }}</span>,
})
class HeaderComponent {
  private store = inject(Store);
  // 任何状态更改都会触发重新渲染
  state = toSignal(this.store);
}

// 正确 -

@Injectable() // 注意：不要使用 providedIn: 'root'
export class ProductStore { ... }
@Component({
  providers: [ProductStore], // 作用域限定在组件树中
})
export class ProductPageComponent {
  store = inject(ProductStore);
}
// 错误做法 - 所有内容都放在全局 Store 中
@Injectable({ providedIn: 'root' })
export class GlobalStore {
  // 包含所有应用状态 - 难以进行 Tree-shaking
}

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@Component({...})
export class DataComponent {
  private destroyRef = inject(DestroyRef);
constructor() {
    this.data$.pipe(
      takeUntilDestroyed(this.destroyRef)
    ).subscribe(data => this.process(data));
  }
}
// 错误做法 - 手动管理订阅
export class DataComponent implements OnDestroy {
  private subscription!: Subscription;
ngOnInit() {
    this.subscription = this.data$.subscribe(...);
  }
ngOnDestroy() {
    this.subscription.unsubscribe(); // 容易遗忘
  }
}

// 正确做法 - 无需订阅
@Component({
  template: <div>{{ data().name }}</div>,
})
export class Component {
  data = toSignal(this.service.data$, { initialValue: null });
}
// 错误做法 - 手动订阅
@Component({
  template: <div>{{ data?.name }}</div>,
})
export class Component implements OnInit, OnDestroy {
  data: Data | null = null;
  private sub!: Subscription;
ngOnInit() {
    this.sub = this.service.data$.subscribe((d) => (this.data = d));
  }
ngOnDestroy() {
    this.sub.unsubscribe();
  }
}