360 Secure SkillHub
360 安全技能中心

Angular

该 Skill 是一份 Angular 开发知识参考,通过 SKILL.md 汇总组件与变更检测、RxJS 订阅、表单校验、依赖注入、路由守卫、HTTP 拦截器等主题,并列出常见陷阱(如 OnPush 引用、trackBy、订阅泄漏、循环 DI)与对应文件索引,供回答 Angular 问题时参考。

ivangdavila
ivangdavila
热度 64.00
最近更新 2026-05-11 15:57:58
分类:开发依赖:纯提示词应用场景:代码生成 / 调试排错

安装技能

复制下面的话术发给你的 Agent,它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill: npx secure-skills-cli add angular
Metadata
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

Topic File
Components & change detection components.md
RxJS & subscriptions rxjs.md
Forms & validation forms.md
Dependency injection di.md
Routing & guards routing.md
HTTP & interceptors http.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