如何在angular2中使用服务？

Question

我创建了一个服务并且有很多变量和函数。我想将此服务注入到几个组件中，但我希望每个组件都更新一些服务变量，因此当调用组件时，服务中的所有变量都将使用所有新值进行更新。

如果我将服务注入到几个组件中，所有组件中的服务是否相同？ （我的意思是服务的引用相同）还是会在每次调用组件时创建一个新引用？

谢谢！

Answer 1

我不确定@Zircon 的答案是否是您想要的，所以我将分享我的方法来满足您的需求。

因此，假设您在 app.module.ts 中导入了服务并将其添加到您的提供者列表中，您可以在服务中进行如下设置：

import { BehaviorSubject } from 'rxjs/Rx';
import { Injectable } from '@angular/core';

@Injectable()
export class YourService {
    public var1: BehaviorSubject<string> = new BehaviorSubject('str');
    public var2: BehaviorSubject<boolean> = new BehaviorSubject(true);
    public var3: BehaviorSubject<number> = new BehaviorSubject(123);

现在，每当一个组件更改其中一个值时，所有其他组件都可以监听并保持更新，因为您的组件如下所示：

export class YourComponent implements OnInit {
  myData: any = this.yourService.var1.subscribe((value) => this.myData = value);


  constructor(
    private yourService: YourService) { }

  ngOnInit() {
  }

}

您可以通过以下方式更新值：

this.yourService.var1.next('new_str');

如果您希望它在您加载特定组件时自动更新您的服务变量，您可以将上述行放在您的 ngOnInit(){} 语句中。

Answer 2

只要您在整个应用程序中仅“提供”一次服务，您的服务的单个实例就会注入到您的所有组件中。通常，“单例”服务将在您的 CoreModule 中声明：

@NgModule({
  imports: [ 
    CommonModule,
    FormsModule,
    RouterModule,
    TranslateModule.forRoot({ //This is an ngx-translate module, it has a service that must be singular
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    })
  ],
  providers: [
    MySingletonService //This is your custom service that can be shared
  ],
  exports: [TranslateModule] // Expose the dependency module only once as well
})
export class CoreModule {
    ...
}

然后您的AppModule（或任何属于您的引导程序的模块）将导入CoreModule 以使其服务可用于您的整个应用程序。请注意这与 SharedModule 有何不同，其中每个依赖模块都将导入 SharedModule，从而在其中获得每个声明/提供者的不同实例。