使用Ajax调用进行Angular 4依赖注入

Question

我想从$_SESSION到PHP获得一些Angular变量。我创建了一个名为Injectable的Globals类，并在Providers的AppModule中定义了这个类。

这是我的globals.ts：

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

@Injectable ()
export class Globals {
    errorMessage: string;

    activeUser: any;

    test: string = "test string";

    constructor(private userService: UserService) {
        this.getActiveUser();

        console.log(this.activeUser); //undefined
    }

    getActiveUser(){
         this.userService.getActiveUser()
            .then(
                user => this.activeUser = user,
                error   => this.errorMessage = <any>error
            );
    }
}

上述日志记录命令在整个项目加载完成后有效。但它是我的依赖，我得到了我的构造函数中的返回值。

示例性组件如下：

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

import { Globals }                   from "../globals";

@Component()
export class ExampleComponent implements OnInit, AfterViewInit {
   constructor(
        private globals: Globals
    ) {
        console.log(this.globals.activeUser); //undefined

        console.log(this.globals.test); //"test string"
    }
}

我还为此创建了一个plunker：https://embed.plnkr.co/zRmkQdfqYDBTAoQPqJ5V/

编辑：我知道它是由异步性引起的，我需要的是在初始化之前获得activeUser的解决方案

任何帮助表示赞赏。

Answer 1

由于AJT_82通过评论提出，问题由APP_INITIALIZER解决。

首先，我在app.module.ts上导入了APP_INITIALIZER：

import { NgModule, APP_INITIALIZER } from '@angular/core';

在@NgModule()功能之前，我已经包含了这个：

export function init_app(globals: Globals) {
    return () => globals.InitializeApp();
}

同样在providers部分：

providers:[
    Globals,
    { provide: APP_INITIALIZER, useFactory: init_app, deps: [Globals], multi: true },
]

最后，我的globals.ts：

getActiveUser(resolver){
    this.userService.getActiveUser()
        .then(
            user => {
                this.activeUser = user;

                resolver();
            },
            error   => this.errorMessage = <any>error
        );
}

InitializeApp(): Promise<any> {
    return new Promise((resolve, reject) => {
        this.getActiveUser(resolve);
    });
}