Angular2 - 如何在服务中初始化数据？答案

【问题标题】：Angular2 - How to initialize data inside a service?Angular2 - 如何在服务中初始化数据？
【发布时间】：2018-01-18 20:40:43
【问题描述】：

我有两个服务。 login.service.ts 和 environment-specific.service.ts。

在login.service.ts 中，我需要从environment-specific.service.ts 初始化一个Json 对象，该对象传递几个链接。

用例是如何在没有ngOnInit(){} 的情况下使其在服务中工作，因为根据 Angular2 生命周期挂钩，ngOnInit() 不能在服务中使用。

在这里你可以找到我必须在 login.service.ts 内部初始化的部分——当然没有 ngOnInit() 方法：

...
import { EnvSpecific } from '../models/env-specific';
import { ActivatedRoute } from "@angular/router";

@Injectable()
export class LoginService {

   link1: string;
   link2: string;
   link3: string;

   constructor(private http: Http, private fbuilder:FormBuilder, private route: ActivatedRoute) { }

   ngOnInit(){
      this.route.data
         .subscribe((data: { envSpecific: EnvSpecific }) => {
            this.link1 = data.envSpecific.link1;
            this.link2 = data.envSpecific.link2;
            this.link3 = data.envSpecific.link3;
      });
   }
   ...
   ...
}

我想将链接传递给传递给不同 http.post API 调用的 URL。例如：

...
var obsRequest = this.http.post( this.link1, serializedForm, this.options )
...

错误很明显：link1 is undefined

有什么建议或提示吗？

【问题讨论】：

为什么不在构造函数中？
@Robin Dijkhof：我试过了......不幸的是没有用。当我在组件内初始化它时，它工作正常并且我访问例如link1 这意味着代码如果没问题。只是在服务内部它没有。
您是否尝试将 link1 设置为类成员定义中的对象？你在哪里link1: string;，把它改成link1: string = '...';。另外，您是否尝试将 this.route.subscribe 行移到构造函数中？这样在服务实例化时就会调用它。
@Lansana：我不确定我是否理解第一个提示的确切含义。但是关于第二个，是的，我做到了：constructor(private http: Http, private fbuilder:FormBuilder, private route: ActivatedRoute) { this.route.data .subscribe((data: { envSpecific: EnvSpecific }) => { this.link1 = data.envSpecific.link1; this.link2 = data.envSpecific.link2; this.link3 = data.envSpecific.link3; }); } Error: Cannot read property link1 of undefined`
您是否只是想从您的环境文件中获取一个值以在您的登录服务中使用？为什么不直接导入环境变量而不是从 URL 中传入呢？

标签： angular angular-services

【解决方案1】：

您可以将服务中ngOnInit 中的逻辑移动到服务的构造函数中。但即便如此，link1 属性可能不会立即设置，因此您可能需要为其提供默认值。

但这对我来说似乎是一种反模式。您可以使用 Angular CLI 默认为您设置的原生 Angular 2 环境。

它同时具有开发/生产变体，您可以根据需要在其中设置值，然后将其导入您的服务中。根据您执行ng build 的方式（如果您传递-prod 标志），将使用不同的环境变量。

【讨论】：

我选择 Angular2 内置 Env。带有服务构造函数的那个没有给出预期的结果。

【解决方案2】：

您可以在使用服务之前先通过应用程序初始化来初始化您的服务。

这可以通过 APP_INITIALIZER 来完成，参见：

https://devblog.dymel.pl/2017/10/17/angular-preload/

Angular: How to correctly implement APP_INITIALIZER

【讨论】：