听一下Angular 2中mock-service的变化

Question

我正在构建一个应用程序，您可以随时在两种语言之间进行更改。我有一个模拟服务，提供我使用的短语。当用户单击语言链接时，mock-service中的语言被更改，但是当我获得短语时，我需要以某种方式侦听更改，因此服务以我想要的语言返回给我更新的短语。

LangService.ts:

activeLang :string = 'EN';
getPhrase(phrase :string) :string{
    if(this.activeLang == 'EN'){
      return this.EN[phrase]; 
    } else {
      return this.CZ[phrase];
    }
  }
  changeLanguage(lang :string) :void{
    if(lang == 'EN' || lang == 'CZ'){
      this.activeLang = lang;
    }
  }

Then some OtherComponent.ts:

setPhrase(phrase :string){
    this._langService.getPhrase(phrase);
    // Here I need to subscribe to getPhrase to get the latest updates
    // If I'm right and if it's possible
  }

我做了一些更正。LangService现在有了可以监听的Observable，但监听器只适用于触发changellanguage()方法的组件。我希望能够改变语言从我的导航组件和捕捉一些其他组件的变化。

LangService.ts:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class LangService {
private activeLang = 'EN';
private activeLangSubject = new Subject<string>();
activeLang$ = this.activeLangSubject.asObservable();
// Objects EN and CZ with properties, etc.
getPhrases(phrases :Array<string>){
  if(this.activeLang == 'EN'){
    let response = <any>{};
    for(let i = 0; i < phrases.length; i++){
      response[phrases[i]] = this.EN[phrases[i]];
    }
    console.log('refresh');
    return JSON.stringify(response);
  } else {
    let response = <any>{};
    for(let i = 0; i < phrases.length; i++){
      response[phrases[i]] = this.CZ[phrases[i]];
    }
    return JSON.stringify(response);
  }
}
changeLanguage(lang :string){
  if(lang == 'EN' || lang == 'CZ'){
    this.activeLang = lang;
    this.activeLangSubject.next(lang);
  }
}

NavComponent.ts:

import { Component, OnInit } from '@angular/core';
import { LangService } from '../lang.service';
@Component({
  moduleId: module.id,
  selector: 'app-nav',
  templateUrl: 'nav.component.html',
  styleUrls: ['nav.component.css'],
  providers: [LangService]
})
export class NavComponent implements OnInit {
  langs :Array<string> = ['EN', 'CZ'];
  constructor(
    private _langService :LangService) {
  }
  changeLanguage(lang :string) :void{
    this._langService.changeLanguage(lang);
  }
}

与NavComponent.html:

<li *ngFor="let lang of langs">
  <a (click)="changeLanguage(lang)">{{ lang }}</a>
</li>

OtherComponent.ts:

import { Component, OnInit } from '@angular/core';
import { LangService } from '../lang.service';
import { NavComponent } from '../nav/nav.component';
@Component({
  moduleId: module.id,
  selector: 'all-notes',
  templateUrl: 'notes.component.html',
  providers: [NoteService, LangService],
  directives: [NavComponent]
})
export class NotesComponent implements OnInit {
  mode = 'Observable';
  postPhrases :Array<string> = [
    "alertTitle", "alertText", "options", "detailsBtn","editBtn","deleteBtn", 
    "addBtn", "serverResp", "actionMessage", "responseMessage", "note"
  ];
  getPhrases :Object;
  constructor(
    private _langService :LangService) {
  }
  ngOnInit() {
    this.updatePhrases(this.postPhrases);
    // This one doesn't work 
    this._langService.activeLang$.subscribe(
      success => this.updatePhrases(this.postPhrases),
      error => console.log(error),
      () => console.log('complete')
    );
  }
  updatePhrases(phrases :Array<string>) :void {
    this.getPhrases = JSON.parse(this._langService.getPhrases(phrases));
  }
}

我现在的问题是我怎么能听上OtherComponent的变化，所以我可以使用方法updatePhrases()来更新短语。

Answer 1

这听起来像是要用管道来做的事情:

import { Pipe, PipeTransform, Injectable } from '@angular/core'
@Injectable()
@Pipe({ name: 'myTranslatePipe' })
export class IndicatorHeadersPipe implements PipeTransform {
  public transform(
    phrase: string,
    activeLang: string
  ) {
    if(activeLang == 'EN'){
      return this.EN[phrase]; 
    } else {
      return this.CZ[phrase];
    }
  }
}

不要忘记在您的NgModule声明中添加管道

然后，在组件

中

@Component({
  selector: 'my-selector',
  template: `
    <div>{{ 'My text' | myTranslatePipe : activeLang }}</div>
  `,
})
export class PageIndicatorComponent {
  private activeLang: string
  changeLanguage(lang :string) :void{
    if(lang == 'EN' || lang == 'CZ'){
      this.activeLang = lang;
    }
  }
}

但是，我建议只使用翻译模块，如ng2-translate

Answer 2

所以基本上我需要做的就是创建一个包含3个变量的服务LangService。

activeLang: string 'EN';
activeLangSubject: Subject<string> = new Subject<string>();
activeLangObservable: Observable<string> = this.activeLangSubject.asObservable();

1. activeLang -用于比较语言的变量，
2. activeLangSubject -用于创建Observable的变量，
3. activeLangSubject -我们可以订阅的变量

之后，我需要将LangService添加到正确的作用域。我想让它是全局的，所以我把它作为一个提供者来引导main.ts文件中的方法。

bootstrap(AppComponent, [LangService]);

当然，我需要在提供它给bootstrap之前导入它。

在bootstrap中提供它之后，我需要做的就是:

• 将其导入到需要侦听更改的每个组件中，
• 不提供它因为我们有它的全局实例我们不想创建其他的
• 注入构造器constructor(private _langService: LangService) {}，

• 订阅

  ngOnInit() { this._langService.langServiceObservable.subscribe( response => console.log('Changed! Active Language: ' + response), error => console.log('Error! Description: ' + error) ); }

如果你不使用ngOnInit()，你也可以订阅构造函数()