Question

我对Angular 2上的单例服务感到困惑。我需要在整个应用程序中使用翻译服务，我希望只有一个服务实例。我有两个按钮来切换语言。当我运行应用程序时，我使用管道来翻译内容并且它可以工作，但切换按钮不起作用。我收到一条错误消息：

self.parent.context.use不是函数'。

我想这是关于某些角度概念的误解，所以，任何人都可以帮我正确实施全球服务吗？

//Translation service
@Injectable()
export class TranslateService {
  private _currentLang: string;

  constructor(){
    this._currentLang = 'es';
  }

  public get currentLang() {
    return this._currentLang;
  }

  public use(lang: string): void {
    // set current language
    this._currentLang = lang;
  }

  private translate(obj : LocalizedData): string {
    // private perform translation
    return obj[this._currentLang];
  }

  public instant(obj: LocalizedData ) {
  // call translation
    return this.translate(obj); 
  }
}

//Navbar Module
@NgModule({
  imports:      [ CommonModule, FormsModule],
  declarations: [ NavbarMenuComponent, TranslatePipe],
  exports: 		[ NavbarMenuComponent]
})

export class NavbarModule { }

//App component
@Component({
  selector: 'app',
  template:'<navbar-menu ></navbar-menu>'
})

export class AppComponent implements OnInit{
  public translatedText : string;
    constructor(){}
    ngOnInit(){}
  }

//app Module
@NgModule({
  imports:      [ BrowserModule, FormsModule, NavbarModule],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent],
  providers: 	[ TranslateService],
})

export class AppModule { }


//Main
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule,[ TranslateService]);

Answer 1

在Angular2中，服务是每个提供商的单身人士。如果您多次提供服务，您将获得多个实例。

如果您在

中提供

@NgModule({ 
  providers: [SomeService]
  ...
})

然后它将在根范围提供，您将获得整个应用程序的单个实例。即使多个@NgModule()包含提供程序中的服务，您也只会获得一个实例，因为它们在应用程序根范围内被提升。

延迟加载的模块有自己的根范围。

如果您在@Component()每个此类组件实例中提供服务，则其子项将获得不同的服务实例。

Angular 2中的单身人士服务

1 个答案: