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

只要您在整个应用程序中“提供”服务一次，您就可以将一个服务实例注入到所有组件中。通常，“{single}”服务将在您的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，从而获得每个声明/提供者的不同实例。

如何在angular2中使用服务？

2 个答案: