Angular 速查
共 27 条 Angular 常用写法与命令，覆盖组件、指令与流程控制、服务与依赖注入、 路由与表单、Angular CLI 五组内容。支持搜索与分类筛选，点击即可复制。
组件
组件 = 模板 + 类 + 元数据。
| 语法 / 命令 | 说明 |
|---|---|
| 组件装饰器 | |
| 组件类（模板可用其属性） | |
| 插值绑定 | |
| 属性绑定（[] 方括号） | |
| 事件绑定（() 圆括号） | |
| 双向绑定（需导入 FormsModule） |
指令与流程控制
内置指令与新模板语法。
| 语法 / 命令 | 说明 |
|---|---|
| 条件渲染（新版本推荐 @if 块） | |
| 列表渲染（新语法用 track） | |
| 动态类名 | |
| 常用指令的模块依赖 | |
| 不产生 DOM 的分组与模板 |
服务与依赖注入
可注入的服务。
| 语法 / 命令 | 说明 |
|---|---|
| 声明可注入、应用级单例 | |
| 构造函数注入依赖 | |
| 发起 HTTP 请求（或转 Promise） | |
| 组件级提供者（作用域限定） | |
| 用 inject() 函数注入（新写法） |
路由与表单
导航与表单。
| 语法 / 命令 | 说明 |
|---|---|
| 路由配置 | |
| 模板 / 代码导航 | |
| 读取路由参数 | |
| 响应式表单 | |
| 两种表单方式的模块 |
Angular CLI
生成与构建。
| 语法 / 命令 | 说明 |
|---|---|
| 新建项目 | |
| 开发服务器（默认 4200） | |
| 生成组件（简写 ng g c card） | |
| 生成服务 / 也可 ng g s / ng g d（指令）/ ng g p（管道） | |
| 生产构建 | |
| 测试与检查 |
使用说明
Angular 速查：组件、指令与流程控制、服务与依赖注入、路由与表单、CLI 命令；支持搜索与分类筛选，点击即可复制。
- 按用途点分类：组件、指令与流程控制、服务与依赖注入、路由与表单、Angular CLI。
- 点「语法 / 命令」列复制片段，替换组件名与路径。
- 生成代码用 ng generate（简写 ng g），开发用 ng serve。
- 服务用 @Injectable({ providedIn: "root" }) + 构造函数 / inject 注入。
常见问题
- Angular 和 React / Vue 有什么不同？
- Angular 是「全家桶」框架：内置依赖注入、路由、表单、HTTP、CLI，约定强、适合大型团队；React / Vue 更偏「库 + 生态自由组合」。
- []、()、[()] 分别是什么？
- [] 是属性绑定（单向：数据到视图）；() 是事件绑定（视图到数据）；[()] 是双向绑定（如 [(ngModel)]）。
- 为什么要依赖注入？
- 依赖注入把「创建依赖」交给框架统一管理，便于替换、测试与复用，还能控制作用域（应用级单例或组件级）。
- ngFor 的 track 有什么用？
- Angular 新控制流 @for 要求 track，用于标识列表项身份，提高更新效率、避免状态错乱，类似 React / Vue 的 key。