Angular 常用指令速查表 🧩

指令速览 🔧

• 模板语法
  使用 {{ }} 实现数据绑定，例如：

  <p>{{ user.name }}</p>
  

  

• 事件绑定
  通过 (event) 监听用户交互，如：

  <button (click)="onSubmit()">提交</button>
  

  

• 属性绑定
  使用 [attr] 动态设置HTML属性，例如：

  <div [attr.title]="'提示: ' + message">内容</div>
  

  

组件生命周期 🧠

• ngOnChanges：检测输入属性变化
• ngOnInit：组件初始化
• ngDoCheck：检测变化（自定义逻辑）
• ngOnDestroy：销毁组件前执行

数据绑定 📊

• 双向绑定：[(ngModel)]（需配合FormsModule）
• 简单绑定：[property] 或 (event)

服务与依赖注入 📦

• 创建服务：

  ng generate service my-service
  

• 注入服务到组件：

  constructor(private myService: MyService) {}
  

  

模块导入 📁

• 模块文件以 .module.ts 结尾，例如：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  

  

如需深入学习 Angular 入门，可访问 Angular 快速入门指南 🚀