Back to Details

angular-services

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Angular Services

Angular Services

Version: Angular 21 (2025) Tags: Services, @Injectable, DI
References: Services Guide • @Injectable API
版本： Angular 21 (2025) 标签： Services, @Injectable, DI
参考链接： 服务指南 • @Injectable API

Best Practices

最佳实践

  • Create service with providedIn
ts
@Injectable({ providedIn: 'root' })
export class DataService {
  getData() {
    return this.http.get('/api/data');
  }
}
  • Use inject() function
ts
@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);
  
  getUsers() {
    return this.http.get<User[]>('/api/users');
  }
}
  • Use factory providers
ts
@Injectable({
  providedIn: 'root',
  useFactory: () => new LoggerService(environment.production)
})
export class LoggerService {
  constructor(private isProduction: boolean) {}
}
  • Use providedIn: 'any' for lazy services
ts
@Injectable({ providedIn: 'any' })
export class LazyService {}
  • Use service in component
ts
@Component({})
export class MyComponent {
  private dataService = inject(DataService);
  
  data$ = this.dataService.getData();
}
  • Use multiple services
ts
@Component({})
export class MyComponent {
  private auth = inject(AuthService);
  private http = inject(HttpClient);
  private router = inject(Router);
}
  • Use service for shared state
ts
@Injectable({ providedIn: 'root' })
export class CartService {
  private items = signal<Item[]>([]);
  
  cartItems = this.items.asReadonly();
  
  addItem(item: Item) {
    this.items.update(items => [...items, item]);
  }
}
  • 使用providedIn创建服务
ts
@Injectable({ providedIn: 'root' })
export class DataService {
  getData() {
    return this.http.get('/api/data');
  }
}
  • 使用inject()函数
ts
@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);
  
  getUsers() {
    return this.http.get<User[]>('/api/users');
  }
}
  • 使用工厂提供器
ts
@Injectable({
  providedIn: 'root',
  useFactory: () => new LoggerService(environment.production)
})
export class LoggerService {
  constructor(private isProduction: boolean) {}
}
  • 针对懒加载服务使用providedIn: 'any'
ts
@Injectable({ providedIn: 'any' })
export class LazyService {}
  • 在组件中使用服务
ts
@Component({})
export class MyComponent {
  private dataService = inject(DataService);
  
  data$ = this.dataService.getData();
}
  • 使用多个服务
ts
@Component({})
export class MyComponent {
  private auth = inject(AuthService);
  private http = inject(HttpClient);
  private router = inject(Router);
}
  • 使用服务实现共享状态
ts
@Injectable({ providedIn: 'root' })
export class CartService {
  private items = signal<Item[]>([]);
  
  cartItems = this.items.asReadonly();
  
  addItem(item: Item) {
    this.items.update(items => [...items, item]);
  }
}