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

我正在尝试为Angular 4应用程序设置配置属性，当应用程序使用

APP\u初始值设定项加载时，如下所示，将属性设置为服务，并尝试将该服务注入其他组件中，我需要这些属性，但值始终为空


应用程序模块.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 { }

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
  }
}

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
        }
    }
}

应用程序组件.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 { }

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
  }
}

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

     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
  }
}

这是因为您有多个服务实例，而您希望使用单实例。从
@组件中删除
提供程序：[EnvironmentService]