Question

当应用程序使用如下所示的APP_INITIALIZER加载时，我正在尝试为Angular 4应用程序设置配置属性，并将属性设置为服务，并尝试将该服务注入其他需要的组件中属性，但值始终为空。

app.module.ts

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { EnvironmentService } from './config.service';
import { HttpClientModule } from '@angular/common/http';

export const appInitializerFn = (env: EnvironmentService) => {
    return () => {
        console.log('inside appinitfn');
//call profiles abn send enc to 

        return env.setEnvironment('dev');
    };
};

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers: [
        EnvironmentService,
        {
            provide: APP_INITIALIZER,
            useFactory: appInitializerFn,
            multi: true,
            deps: [EnvironmentService]
        }
    ]
})
export class AppModule { }

config.service.ts

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

@Injectable()
export class EnvironmentService {

    private environment = {};

    constructor(private http: HttpClient) { }

    getEnvironment() {
        return this.environment;
    }

    setEnvironment(env) {
        this.environment={
          test:true
        }
    }
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { EnvironmentService } from './config.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [EnvironmentService]
})
export class AppComponent implements OnInit {
  name = 'Angular 4';
  constructor(private env: EnvironmentService) {}
  ngOnInit() {
    let a = this.env.getEnvironment();
    console.log(a); // Getting null
  }
}

Answer 1

您在EnvironmentService和app.component.ts中都声明了app.module.ts，请删除组件中的提供程序并尝试。

     import { Component, OnInit } from '@angular/core';
import { EnvironmentService } from './config.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
//  providers: [EnvironmentService]  ==> remove this
})
export class AppComponent implements OnInit {
  name = 'Angular 4';
  constructor(private env: EnvironmentService) {}
  ngOnInit() {
    let a = this.env.getEnvironment();
    console.log(a); // Getting null
  }
}

Answer 2

它是因为您在期望单例的同时拥有多个服务实例。从providers: [EnvironmentService]中删除@Component。

Angular 4-无法通过服务在组件之间共享数据

2 个答案: