Question

我在整个申请中使用和想要使用的服务是

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

@Injectable()
export class UserDetailsService {
    objUser: User = new User();
    testing: string;
    getData() {
        return this.testing;        
    }
    setData(my:string) {
        debugger;
        this.testing = my;
    }
}

现在我想在我的一个组件

中设置变量测试

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

@Component({
    selector: 'some',
    templateUrl: 'someUrl',
    providers: [UserDetailsService]
})
export class LoginComponent {
constructor(private _Service: UserDetailsService)

}
onClick(){
_Service.set("my Value");
}

现在在另一个组件中，如果我想使用此字段测试，我将得到未定义的

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

@Component({
    selector: 'somee1',
    templateUrl: 'url'
})
export class LandingComponent {
    constructor(private _UserService: UserDetailsService) {
        debugger;
        var test = _UserService.getData();
        debugger;
    }
}

在我的app模块中，我有这个

@NgModule({
    imports: ...,
    declarations:...,
    bootstrap: [AppComponent],
    providers: [HttpService, UserDetailsService]}]
})

Answer 1

从UserDetailsService组件中移除providers，并仅将其保留在@NgModule()

的提供商中

Angular2 DI维护每个提供商的实例。如果多次提供，则会获得多个实例。如果您在组件中提供它，则会在应用程序中获得该组件的任何实例。

添加到NgModule的提供者都被添加到根范围，如果提供的服务不止一次，则只有一个实例被添加到根范围。

延迟加载模块获取自己的范围，因此这与之前解释的情况不同。

Answer 2

创建共享模块：

<View style={{alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'white'}}>
  <ActivityIndicator
    animating={true}
    style={
      {
        alignItems: 'center',
        justifyContent: 'center',
        opacity: this.state.loading ? 1 : 0
      }}
    size="large"
  />
</View>

在app.module.ts中（注意sharedModule.forRoot（））：

@NgModule({
  imports: [CommonModule, RouterModule, ReactiveFormsModule ],
  declarations: [ ErrorMessagesComponent ],
  exports: [ CommonModule, ReactiveFormsModule, HttpModule, RouterModule, ]
})

export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [ AuthorizationService, LoginService, AuthGuardService ]
    };
  }
}

然后在每个使用共享模块的模块中：

@NgModule({
    imports: [ BrowserModule, RouterModule.forRoot(appRoutes), SharedModule.forRoot(), 
               HomeModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ],
    providers: [ appRoutingProviders ]

})

无法在Angular2 Final Release中使用Service作为SingleTon对象

2 个答案: