面试题：Angular服务中的单例模式及其实践

1. 在Angular服务中实现单例模式的方式

在Angular中，服务默认以单例模式存在。这主要依赖于Angular的依赖注入（Dependency Injection, DI）系统。

模块级注入：当在模块的providers数组中提供服务时，Angular的DI系统会为该模块创建一个服务的单例实例。例如，在app.module.ts中：

import { NgModule } from '@angular/core';
import { MyService } from './my.service';

@NgModule({
  providers: [MyService]
})
export class AppModule {}

在整个AppModule及其子组件树中，无论何处注入MyService，得到的都是同一个实例。

组件级注入：如果在组件的providers数组中提供服务，该服务会在组件及其子组件的作用域内是单例。例如，在my - component.ts中：

import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app - my - component',
  providers: [MyService]
})
export class MyComponent {}

此时，在MyComponent及其子组件中注入的MyService是同一个实例，但与其他组件或模块注入的MyService实例不同。

2. 单例特性为服务带来的优势

数据共享：多个组件可以共享服务中的数据，方便在不同组件间传递和同步数据。例如，在一个电子商务应用中，CartService可以保存购物车的商品列表。不同的组件如商品详情页、购物车页面等都可以注入CartService，实时获取和更新购物车数据。
资源管理：对于一些需要集中管理的资源，如API请求服务。单例模式确保只有一个实例在处理API请求，避免了重复创建请求实例带来的资源浪费。例如，ApiService负责处理与后端服务器的所有HTTP请求，多个组件共享这一个实例，减少了资源开销。
提高性能：由于不需要多次创建相同服务的实例，节省了实例化的时间和内存空间，从而提升了应用的性能。特别是对于复杂的服务，多次实例化可能会涉及复杂的初始化逻辑，单例模式避免了这种重复开销。

3. 举例说明

假设我们有一个简单的计数器应用，包含一个CounterService服务。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CounterService {
  private count = 0;

  increment() {
    this.count++;
  }

  getCount() {
    return this.count;
  }
}

在app.component.ts和another - component.ts两个组件中注入并使用该服务：

// app.component.ts
import { Component } from '@angular/core';
import { CounterService } from './counter.service';

@Component({
  selector: 'app - root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private counterService: CounterService) {}

  increment() {
    this.counterService.increment();
  }

  getCount() {
    return this.counterService.getCount();
  }
}

<!-- app.component.html -->
<button (click)="increment()">Increment</button>
<p>Count: {{ getCount() }}</p>

// another - component.ts
import { Component } from '@angular/core';
import { CounterService } from './counter.service';

@Component({
  selector: 'app - another - component',
  templateUrl: './another - component.html'
})
export class AnotherComponent {
  constructor(private counterService: CounterService) {}

  getCount() {
    return this.counterService.getCount();
  }
}

<!-- another - component.html -->
<p>Count from Another Component: {{ getCount() }}</p>

在这个例子中，无论在AppComponent还是AnotherComponent中，注入的CounterService都是同一个实例，它们共享count数据，实现了数据的共享。

星途面试题库

面试题：Angular服务中的单例模式及其实践

知识考点

面试题答案

1. 在Angular服务中实现单例模式的方式

2. 单例特性为服务带来的优势

3. 举例说明