angular

适用场景

当用户希望进行以下操作时，请使用此技能：

• 使用 Angular 构建单页应用（SPA）
• 创建 Angular 组件、服务、指令和管道
• 实现路由、延迟加载和导航守卫
• 使用响应式表单或模板驱动表单
• 使用依赖注入和 Angular 模块
• 集成 RxJS 可观察对象和 async 管道
• 设置 Angular CLI 项目并生成脚手架
• 使用 OnPush 变更检测优化性能

如何使用此技能

工作流

1. 识别请求领域，根据用户的问题判断方向（组件创建、路由、表单、服务等）
2. 应用 Angular 最佳实践，遵循官方风格指南
3. 生成 TypeScript 代码，采用 Angular 约定和装饰器
4. 验证解决方案能够编译，并遵循依赖注入模式

1. 项目设置

# Create a new Angular project
ng new my-app --routing --style=scss

# Generate components and services
ng generate component features/user-list
ng generate service core/services/user

2. 组件示例

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Observable } from 'rxjs';
import { UserService } from '../../core/services/user.service';
import { User } from '../../core/models/user.model';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserListComponent implements OnInit {
  users$!: Observable<User[]>;

  constructor(private userService: UserService) {}

  ngOnInit(): void {
    this.users$ = this.userService.getUsers();
  }
}

3. 使用 HttpClient 的服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserService {
  private readonly apiUrl = '/api/users';

  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }

  createUser(user: User): Observable<User> {
    return this.http.post<User>(this.apiUrl, user);
  }
}

4. 使用延迟加载的路由

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  {
    path: 'users',
    loadChildren: () =>
      import('./features/users/users.module').then(m => m.UsersModule)
  }
];

最佳实践

• 使用 OnPush 变更检测和纯管道来提升性能
• 将代码组织到 Core、Shared 和 Feature 模块中
• 优先使用构造函数注入；使用 providedIn: 'root' 注册服务，使其成为单例
• 取消订阅可观察对象以防止内存泄漏（使用 takeUntil 或 async 管道）
• 在复杂的验证场景中使用响应式表单
• 延迟加载功能模块，以减小初始包的大小

资源

• 官方文档：https://angular.io/docs
• Angular CLI：https://angular.io/cli
• RxJS：https://rxjs.dev/

关键词

angular, Angular CLI, 组件, 服务, RxJS, 依赖注入, 路由, 响应式表单, TypeScript, SPA, OnPush, 延迟加载, 模块, 指令, 管道