跳至主要内容
小龙虾小龙虾AI
🤖

Angular

Avoid common Angular mistakes — subscription leaks, change detection, dependency injection, and module organization.

下载2.0k
星标3
版本1.0.1
自动化脚本
安全通过

技能说明


name: Angular slug: angular version: 1.0.1 description: Build reliable Angular apps avoiding RxJS leaks, change detection traps, and DI pitfalls.

When to Use

User needs Angular expertise — component architecture, RxJS patterns, change detection, dependency injection, routing, and forms.

Quick Reference

TopicFile
Components & change detectioncomponents.md
RxJS & subscriptionsrxjs.md
Forms & validationforms.md
Dependency injectiondi.md
Routing & guardsrouting.md
HTTP & interceptorshttp.md

Common Mistakes

  • OnPush with mutated objects won't trigger change detection — always create new reference: {...obj} or [...arr]
  • @ViewChild is undefined in constructor/ngOnInit — access in ngAfterViewInit or later
  • *ngFor without trackBy re-renders entire list on any change — add trackBy returning stable ID
  • Manual subscribe() without unsubscribe leaks memory — use async pipe, takeUntilDestroyed(), or unsubscribe in ngOnDestroy
  • HttpClient returns cold Observable — each subscribe() fires new HTTP request
  • setTimeout/setInterval outside NgZone — change detection won't run, use NgZone.run() or signals
  • Circular DI dependency crashes app — use forwardRef() or restructure services
  • ElementRef.nativeElement direct DOM access breaks SSR — use Renderer2 or @defer
  • Route params via snapshot miss navigation changes — use paramMap Observable for same-component navigation
  • setValue() on FormGroup requires ALL fields — use patchValue() for partial updates

如何使用「Angular」?

  1. 打开小龙虾AI(Web 或 iOS App)
  2. 点击上方「立即使用」按钮,或在对话框中输入任务描述
  3. 小龙虾AI 会自动匹配并调用「Angular技能完成任务
  4. 结果即时呈现,支持继续对话优化

相关技能