Events Angular2事件管理器订阅vs公共变量？

我正在为Angular 2应用程序开发一个i18n服务系统。 为了避免不纯净的管道，我在翻译管道中添加了一个附加参数，该参数的更改将触发管道值进行更新，因此它将更新翻译文本

最佳做法是什么：从服务中引发一个事件并在每个组件中订阅以检测语言更改

vs

将服务变量

lang

设置为公共变量，并将其作为参数添加到管道中？

我已经测试过了，它们都能工作

使用事件发射器：

<button md-button class="btn-register">{{'Register' | _:tr.lang}}</button>

component.html

<button md-button class="btn-register">{{'Register' | _:lang}}</button>

翻译服务

import {Injectable, EventEmitter} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import {Languages} from "../config/Constants";

export interface LangChangeEvent {
    lang: string;
}

@Injectable()
export class TranslateService {

    public lang: string;
    dictionary: any = {};

    /**
     * An EventEmitter to listen to lang change events
     * onLangChange.subscribe((params: LangChangeEvent) => {
     *     // do something
     * });
     * @type {ng.EventEmitter<LangChangeEvent>}
     */
    public onLangChange: EventEmitter<LangChangeEvent> = new EventEmitter<LangChangeEvent>();

    constructor(private http: Http, private path:string) {

        let lang = this.detectLang();
        this.setLanguage(lang);
    }

    /**
     * A standard alias used for the translate function
     * @param val
     * @returns {string}
     * @private
     */
    public _(val: string) {
        return this.dictionary[val] ? this.dictionary[val] : val;
    }

    public setLanguage(lang: string) {

        if(Languages[lang]) {
            this.loadLanguage(lang, Languages[lang].path);
        }
    }

    private loadLanguage(lang:string, url: string) {
        return this.http.get(url).toPromise()
            .then( dictionary =>
            {
                this.dictionary = dictionary.json();
                this.lang = lang;
                this.onLangChange.emit({ lang: this.lang });
            })
            .catch( error => console.log(error) );
    }

    private detectLang(): string {
        if (typeof window === 'undefined' || typeof window.navigator === 'undefined') {
            return 'en';
        }
        let browserLang: any;
        if (typeof window.navigator['languages'] !== 'undefined' && window.navigator['languages'].length > 0) {
            browserLang = window.navigator['languages'][0].indexOf('-') !== -1 || window.navigator['languages'].length < 2 ? window.navigator['languages'][0] : window.navigator['languages'][1];
        } else {
            browserLang = window.navigator['language'] || window.navigator['browserLanguage'];
        }

        return browserLang && browserLang.length ? browserLang.split('-')[0] : 'en'; // use navigator lang if available
    }
}

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import {Languages} from "../config/Constants";

export interface LangChangeEvent {
    lang: string;
}

@Injectable()
export class TranslateService {

    public lang: string;
    dictionary: any = {};


    constructor(private http: Http, private path:string) {

        let lang = this.detectLang();
        this.setLanguage(lang);
    }

    /**
     * A standard alias used for the translate function
     * @param val
     * @returns {string}
     * @private
     */
    public _(val: string) {
        return this.dictionary[val] ? this.dictionary[val] : val;
    }

    public setLanguage(lang: string) {

        if(Languages[lang]) {
            this.loadLanguage(lang, Languages[lang].path);
        }
    }

    private loadLanguage(lang:string, url: string) {
        return this.http.get(url).toPromise()
            .then( dictionary =>
            {
                this.dictionary = dictionary.json();
                this.lang = lang;
            })
            .catch( error => console.log(error) );
    }

    private detectLang(): string {
        if (typeof window === 'undefined' || typeof window.navigator === 'undefined') {
            return 'en';
        }
        let browserLang: any;
        if (typeof window.navigator['languages'] !== 'undefined' && window.navigator['languages'].length > 0) {
            browserLang = window.navigator['languages'][0].indexOf('-') !== -1 || window.navigator['languages'].length < 2 ? window.navigator['languages'][0] : window.navigator['languages'][1];
        } else {
            browserLang = window.navigator['language'] || window.navigator['browserLanguage'];
        }

        return browserLang && browserLang.length ? browserLang.split('-')[0] : 'en'; // use navigator lang if available
    }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http}；
导入“rxjs/add/operator/toPromise”；
从“./config/Constants”导入{Languages}；
导出接口LangChangeEvent{
朗：弦；
}
@可注射（）
导出类TranslateService{
公共语言：字符串；
字典：any={}；
构造函数（私有http:http，私有路径：字符串）{
设lang=this.detectLang（）；
这就是语言；
}
/**
*用于转换函数的标准别名
*@param val
*@返回{string}
*@私人
*/
公共值（val:string）{
返回此.dictionary[val]？此.dictionary[val]：val；
}
公共设置语言（lang:string）{
if（语言[lang]）{
this.loadLanguage（lang，Languages[lang].path）；
}
}
专用加载语言（lang:string，url:string）{
返回此.http.get（url.toPromise（））
.然后（字典=>
{
this.dictionary=dictionary.json（）；
this.lang=lang；
})
.catch（错误=>console.log（错误））；
}
私有detectLang（）：字符串{
if（typeof window=='undefined'| | typeof window.navigator=='undefined'）{
返回“en”；
}
让布朗郎：任何；
if（类型为window.navigator['languages']！='undefined'&&window.navigator['languages']。长度>0）{
browserLang=window.navigator['languages'][0]。indexOf（'-'）！=-1 | | window.navigator['languages']。长度<2？window.navigator['languages'][0]：window.navigator['languages'][1]；
}否则{
browserLang=window.navigator['language']| | window.navigator['browserLanguage']；
}
返回browserLang&&browserLang.length？browserLang.split（'-'）[0]：“en”；//如果可用，请使用导航器lang
}
}

只是一个提示。除了组件中的

@Output（）。在服务中使用
可观察的
或
主题
。请参见我删除了事件发射器。我暂时将其保留在公共变量中，因为需要更少的代码如果用
Subject
替换它，那么除了
next（）
而不是
emit（）
@GünterZöchbauer之外，应该没有什么区别，但这会让我继续添加订阅的每个组件，相反，通过使用
tr.lang
将其公开为公共变量，我只需要注入服务对不起，我不理解您最后的评论。为什么使用
EventEmitter
时不需要订阅
EventEmitter
目前只是扩展了
Observable
或
Subject
，但这并不能保证保持这种方式。只是一个提示。除了组件中的
@Output（）。在服务中使用
可观察的
或
主题
。请参见我删除了事件发射器。我暂时将其保留在公共变量中，因为需要更少的代码如果用
Subject
替换它，那么除了
next（）
而不是
emit（）
@GünterZöchbauer之外，应该没有什么区别，但这会让我继续添加订阅的每个组件，相反，通过使用
tr.lang
将其公开为公共变量，我只需要注入服务对不起，我不理解您最后的评论。为什么使用
EventEmitter
时不需要订阅
EventEmitter
目前只扩展了
可观察的
或
主题
，但不保证保持这种方式。
export class LoginComponent implements OnInit {
    loginForm: FormGroup;

    constructor(private _fb: FormBuilder, private _authService: AuthService, private tr:TranslateService) {

    }

    ngOnInit():any {

        this.loginForm = this._fb.group({
            email: ['', Validators.required],
            password: ['', Validators.compose( [Validators.required, hasNumbers] ) ]
        });

    }

    onSubmit(form) {
        this._authService.login( this.loginForm.value );
    }
}

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import {Languages} from "../config/Constants";

export interface LangChangeEvent {
    lang: string;
}

@Injectable()
export class TranslateService {

    public lang: string;
    dictionary: any = {};


    constructor(private http: Http, private path:string) {

        let lang = this.detectLang();
        this.setLanguage(lang);
    }

    /**
     * A standard alias used for the translate function
     * @param val
     * @returns {string}
     * @private
     */
    public _(val: string) {
        return this.dictionary[val] ? this.dictionary[val] : val;
    }

    public setLanguage(lang: string) {

        if(Languages[lang]) {
            this.loadLanguage(lang, Languages[lang].path);
        }
    }

    private loadLanguage(lang:string, url: string) {
        return this.http.get(url).toPromise()
            .then( dictionary =>
            {
                this.dictionary = dictionary.json();
                this.lang = lang;
            })
            .catch( error => console.log(error) );
    }

    private detectLang(): string {
        if (typeof window === 'undefined' || typeof window.navigator === 'undefined') {
            return 'en';
        }
        let browserLang: any;
        if (typeof window.navigator['languages'] !== 'undefined' && window.navigator['languages'].length > 0) {
            browserLang = window.navigator['languages'][0].indexOf('-') !== -1 || window.navigator['languages'].length < 2 ? window.navigator['languages'][0] : window.navigator['languages'][1];
        } else {
            browserLang = window.navigator['language'] || window.navigator['browserLanguage'];
        }

        return browserLang && browserLang.length ? browserLang.split('-')[0] : 'en'; // use navigator lang if available
    }
}