Angular 2 - 单身人士服务?

时间:2016-09-02 04:38:59

标签: angular angular2-di

在Angular 1中,我经常使用工厂来获取服务,以存储许多组件可访问的共享状态。看起来在Angular 2中,每次都会创建注入@Injectable()的所有服务,从而失去共享状态。

我注册'根模块的providers元键上的服务,但我仍然得到一个瞬态实例。

我有什么:

Injectable()
export class ArtistService {
   constructor(private http:Http) {
     // firing on each injection
     console.log("ArtistService ctor");
   }

}

然后在组件中调用它:

@Component({
    selector: 'artist-display',
    templateUrl: './artistDisplay.html',
})
export class ArtistDisplay  {
    constructor(private artistService: ArtistService) {
           // instance is fine but transient
    }
}

模块的定义:

@NgModule({
  declarations: [...],
  imports: [BrowserModule, FormsModule, HttpModule,
    RouterModule.forRoot(rootRouterConfig)],
  providers   : [
      ArtistService,

      // make sure you use this for Hash Urls rather than HTML 5 routing
      { provide: LocationStrategy, useClass: HashLocationStrategy },
  ],
  bootstrap: [AppComponent]
})

我怀疑可能有其他方式注册' ArtistService所以它作为静态实例保持加载状态?可以通过DI实现,还是需要手动创建静态实例方法?

更新
结果证明上面的代码可以正常工作。我正在寻找错误的地方以及导致数据无法正确缓存的逻辑错误。

上述代码可以在顶级AppModule providers部分中运行并分配服务,这是在AppComponent期间使父引用保持加载的关键。在提供 Singleton 实例的应用程序的生命周期内有效保持加载状态。

要获得瞬态实例,您可以在实际组件上声明providers元标记和服务名称 ,然后只要组件创建服务加载/重新加载。

4 个答案:

答案 0 :(得分:3)

您所展示的是正确的方法。它创建了将在组件之间共享的单个实例。

https://plnkr.co/edit/FBCa39YC4ZPoy6y8OZQl?p=preview仅供参考。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import {service} from './service';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent],
  providers:[service],

  bootstrap:    [ AppComponent ]
})
export class AppModule { }

答案 1 :(得分:3)

我还想创建一个Object作为angular2中的提供者使用,所以我创建了一个@injector。 但是如果我们在每个@component中设置提供者并导入它,那么每个组件使用不同的注入器对象。 为了创建单例提供程序,我在父组件中声明了这个提供程序并将其导入到每个组件中,现在它正常工作。 https://angular.io/guide/dependency-injection

答案 2 :(得分:1)

好的,让我尝试根据我的经验解释服务是如何工作的,基本上是文档。

主要有三种情况:

  • 该服务包含在组件级别的providers数组中 - 该服务可以注入父级和所有子级。

  • 该服务包含在模块级别的providers数组中 - 此模块中的所有内容都知道该服务。

  • 该服务包含在模块级别的providers数组中 - 此模块中的所有内容都知道该服务,但如果您使用此模块中的组件来自另一个导入第一个模块的模块中的另一个组件,那么实例该组件的服务将有所不同。

答案 3 :(得分:1)

单身人士服务只能保存在 app.module.ts“providers”(数组)

并且不得将其放置在任何其他组件或服务提供者(阵列)中。

如果这样做是正确的那么角度2 - 2.4.0 - Singleton工作正常