如何向服务中注入一些数据？

20 浏览
0 Comments

如何向服务中注入一些数据？

我正在使用 Angular 9，并且我需要将一些配置数据注入到服务中：

@Injectable({

providedIn: 'root'

})

export class AuthService {

private auth: any;

constructor(private authConfig: AppConfig) {

}

}

我需要将 AppConfig 注入到该服务中。我该如何做？

0

3 答案

0 Comments

问题出现的原因是如果AppConfig是一个服务，那么你可以很容易地通过之前的方式将其注入到AuthService中。否则，如果AppConfig不是一个服务，而且Angular不能够注入它（因为它不受Angular的管理），那么你可能需要将AppConfig中的字段设置为静态的，或者在AuthConfig中手动创建一个实例，或者将它设置为单例，甚至将它添加到AppModule的providers部分。但是我认为你应该让Angular来管理它，如果它不是一个服务，将它添加到providers中。

解决方法是将AppConfig添加到providers。

0
0 Comments

问题的原因是想要向服务中注入一些数据。解决方法是创建一个服务，并使用@Injectable装饰器进行装饰，然后将provideIn属性设置为root，这将使服务成为单例。

首先，创建一个名为AppConfig的服务，并使用@Injectable装饰器进行装饰。在AppConfig中，设置url和port属性的类型为string和number。

@Injectable({
  providedIn: 'root'
})
export class AppConfig {
  url: string;
  port: number;
}

接下来，在AppModule中注入AppConfig，并设置url和port属性的值为指定的值。这样，每次使用AppConfig的时候，都会得到相同的实例。

import { NgModule } from '@angular/core';
import { AppConfig } from './app.config';
@NgModule({
  providers: [
    AppConfig
  ]
})
export class AppModule {
  constructor(config: AppConfig) { 
    config.url = '127.0.0.1';
    config.port = 3000;
  }
}

最后，在任何组件或服务中注入AppConfig，并使用它来访问url和port属性。

import { Component } from '@angular/core';
import { AppConfig } from './app.config';
@Component({
  selector: 'app-root',
  template: `
    
URL: {{ config.url }}

    
Port: {{ config.port }}

  `
})
export class AppComponent {
  constructor(public config: AppConfig) {}
}

通过以上步骤，我们可以在整个应用程序中注入AppConfig，并访问其中的数据。

0
0 Comments

如何向服务中注入一些数据？

问题的出现原因：

当我们需要在Angular项目中向服务中注入一些数据时，可能会遇到以下问题：

1. 对于简单的基于对象的配置数据，如 `{url: "/login", ... }`，我们应该如何处理？

2. 如何利用TypeScript的优势来收集和管理配置数据？

3. 如何根据不同的环境使用不同的配置文件？

4. 是否可以在运行时根据一些动态规则提供配置？

解决方法：

针对以上问题，我们可以采取以下解决方法：

1. 使用静态数据：对于简单的配置数据，可以使用一个简单的JSON文件来处理。可以参考 这个答案 来了解如何在Angular项目中导入JSON文件。

2. 使用专门的TypeScript类：为了利用TypeScript的优势，可以声明一个简单的类文件，并将配置数据作为该类的静态属性。然后在任何地方通过导入来使用这些配置数据。

3. 使用environment.ts：Angular已经提供了基于环境的配置功能。可以在 environment.ts 和 environment.prod.ts 中设置不同的配置，可以在 这里 了解更多详情。

4. 运行时配置：当了解了前面几种方法的优劣后，可能会想到是否可以在运行时根据一些动态规则提供配置。通过使用 provide: APP_INITIALIZER，可以在模块启动之前甚至通过异步调用来注入配置。可以在 这里 了解更多详情。

对于这个问题，我认为使用environment.ts是最佳选择。

0