面试题：Angular服务在模块间共享与配置

设计共享服务
- 创建服务类：使用Angular CLI命令 ng generate service shared - name 生成共享服务类。例如，创建一个名为 SharedDataService 的服务：

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

@Injectable({
  providedIn: 'root'
})
export class SharedDataService {
  private sharedData: any;

  constructor() { }

  setSharedData(data: any) {
    this.sharedData = data;
  }

  getSharedData() {
    return this.sharedData;
  }
}

使用 providedIn 选项：上述代码中，providedIn: 'root' 表示该服务在应用的根模块中提供，这使得该服务在整个应用中是单例的，所有模块都可以共享它。这种方式适用于大多数需要共享的服务场景。如果不想在根模块提供，可以在特定模块的 providers 数组中提供服务。

不同环境下的配置
- 环境文件：在Angular项目中，src/environments 目录下有 environment.ts 和 environment.prod.ts 文件，分别用于开发和生产环境的配置。例如，假设共享服务需要一个API地址，在 environment.ts 中可以这样配置：

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};

 在 `environment.prod.ts` 中：

export const environment = {
  production: true,
  apiUrl: 'https://example.com/api'
};

在服务中使用配置：在共享服务中注入 environment 配置。首先，将环境配置文件导入到服务中：

import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class SharedApiService {
  private apiUrl: string;

  constructor() {
    this.apiUrl = environment.apiUrl;
  }

  getApiUrl() {
    return this.apiUrl;
  }
}

使用工厂函数（可选）：如果配置比较复杂，还可以使用工厂函数来创建服务实例。例如：

import { Injectable, Inject, InjectionToken } from '@angular/core';
import { environment } from '../../environments/environment';

export const API_URL = new InjectionToken<string>('API_URL');

export function apiUrlFactory() {
  return environment.apiUrl;
}

@Injectable({
  providedIn: 'root'
})
export class SharedApiService {
  private apiUrl: string;

  constructor(@Inject(API_URL) apiUrl: string) {
    this.apiUrl = apiUrl;
  }

  getApiUrl() {
    return this.apiUrl;
  }
}

然后在根模块中配置工厂：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { API_URL, apiUrlFactory } from './shared - api.service';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    {
      provide: API_URL,
      useFactory: apiUrlFactory
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

这样就实现了在不同Angular模块间共享服务，并在不同环境下有不同的配置。

星途面试题库

面试题：Angular服务在模块间共享与配置

知识考点

面试题答案