如何注入服务一些数据？ [关闭]答案

【问题标题】：How to inject to service some data? [closed]如何注入服务一些数据？ [关闭]
【发布时间】：2020-07-04 00:38:57
【问题描述】：

我正在使用angular 9，我需要将配置数据注入服务：

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private auth: any;

  constructor(private authConfig: AppConfig) {
  }
}

我需要将AppConfig 注入服务。
我该怎么做？

【问题讨论】：

你在哪里设置AppConfig
@malbarmavi 我想在app.module.ts 类中设置AppConfig。
你想注入一个配置对象，对吧？您是否需要部署工具来根据您要部署到的环境替换配置中的值？

标签： angular

【解决方案1】：

您可以只创建一个服务并使用可注入装饰器进行装饰，然后将 provideIn 设置为 root（这将使服务成为单例）。

AppConfig

@Injectable({
  providedIn:"root"
})
export class AppConfig {

  url:string;
  port:number;

}

然后您可以将服务注入 appNodule 广告设置属性

...
export class AppModule {

  constructor(config:AppConfig) { 
    config.url = '127.0.0.1';
    config.port = 3000;
  }
 }

之后，您将 appConfig 注入应用中的任何组件和服务

【讨论】：

【解决方案2】：

如果AppConfig 是service，您应该按照您的方式轻松地将其注入AuthService。否则，如果 AppConfig 不是服务并且 Angular 无法注入它（因为无法通过 Angular 进行管理），那么您可能需要将 AppConfig 中的字段设为静态或在 AuthConfig 中创建一个实例手动，或使其成为单例，甚至将其添加到AppModule 中的提供程序部分。但我认为你应该让 Angular 来管理它，如果它不是 service，请将其添加到 providers

【讨论】：

【解决方案3】：

1.使用静态数据

对于简单的基于对象的配置数据 `{url: "/login", ... } 我建议你使用一个简单的 JSON 文件。您可以在this answer中阅读有关如何将 JSON 文件导入 Angular 项目的信息

2。使用专门的打字稿类

为了利用 typescript 的优势，你可以声明一个简单的类文件，并在那里收集你的配置作为 static 属性，绑定到类：

export class AppConfig{
  public static xy = "..."
}

然后使用myVariable = AppConfig.xy 将其导入（不要忘记导入它）

3.使用 environment.ts

这已经在 Angular 中了，你可以使用基于环境的配置，阅读更多关于 environment.ts 和 environment.prod.ts here 的信息。这很像第 2 点，但如果您运行 ng build 或 ng build --prod，文件将被替换为不同的文件。

4.运行时配置

在您了解了前面示例的优缺点之后，您可能想知道我们是否只能在运行时提供配置，也许基于一些动态规则？是的，这是可能的，但是有点复杂，但是您可以在模块启动之前注入配置，即使是从异步调用中，也可以使用 provide: APP_INITIALIZER。阅读更多关于它的信息here

【讨论】：

我认为 environment.ts 是这里最好的情况?

【解决方案4】：

一种选择是使用静态 json 文件。

在应用程序的src/assets/ 文件夹中创建一个包含您的配置的config.json 文件。
使用 HTTP 检索服务中的配置。

auth.service.ts

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

@Injectable()
export class AuthService {
  constructor(private http: HttpClient) { 
    this.http.get('/assets/config.json').subscribe(data => {
      console.log(data);
    });
  }
}

工作示例：Stackblitz

【讨论】：

? 可以工作，但您不需要每次需要读取配置值时都进行 http 请求，这样您就可以发出请求并将数据存储在常量 nr localStorage 之类的地方 ?

【解决方案5】：

这就是环境的用途。

src/environment.ts 和 src/environment.prod.ts

默认内容为：

export const environment = {
  production: false
};

或用于 prod 环境

export const environment = {
  production: true
};

所以你提供你的配置，例如

import {AppConfig} from '../app/models/app-config';

export const environment = {
  production: false,
  authConfig: {
    clientID: 'oidc-client',
    // stuff or other
  } as AppConfig
};

与 prod 环境相同或其他。

然后你像导入它一样

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

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  private authConfig = environment.authConfig;

  constructor() {
  }
}

对于生产版本，它将自动替换为environment.prod.ts 中的配置。

【讨论】：

环境选项是最好的之一 ?

【解决方案6】：

这只是另一种方式，您可以将配置存储在 json 文件中并将文件放在资产文件夹中，然后您可以像这样使用“导入”读取文件

import * as  config from '~/src/assets/app.config.json';
console.log('?‍♂️',config)

demo ?

【讨论】：