Routing mit Sprache in Angular + Typescript VS Code

Question

Ich entwickle eine mehrsprachige Angular4-Anwendung mit VS-Code.

Der Router hat so sein:

localhost/en-us/Visionen

ich eine Klasse namens TranslateHelper haben:

import { ActivatedRoute } from '@angular/router'; 
export class TranslateHelper { 
    private currentLanguage: string; 
    private defaultLanguage = 'de-de'; 

    constructor(private route: ActivatedRoute) {} 

    public getCurrentLanguage() { 
     this.route.params.subscribe(params => { 
     this.currentLanguage = params.lang; 
    }); 

    return this.currentLanguage; 
    } 
} 

die App-Routing. Modul ist:

und in der Fußzeile Ich versuche, die Sprache in der URL hinzuzufügen:

export class FooterComponent implements OnInit { 
    public lang; 

    constructor(private translateHelper: TranslateHelper) { } 

    ngOnInit() { 
    this.lang = this.translateHelper.getCurrentLanguage(); 
    } 

} 

HTML:

<li><a [routerLink]="[lang, 'visions']">Visions</a></li> 

ich nicht erhalten jeden Fehler, aber die lang in der Fußzeile ist immer undefiniert, genau wie die params.lang ist.

kann mir jemand sagen, wie kann ich es beheben? trotzdem danke.

Answer 1

Es ist, weil Ihre Rückkehr außerhalb Ihres Abonnements ist. Versuche, es hinein zu legen.

Answer 2

Sie versuchen, etwas aus einem Abonnement zurückzugeben, das wird nicht wirklich funktionieren. Entweder können Sie die Route Params zurückgeben und diese in Ihrer Komponente abonnieren oder Sie können es so machen:

export class TranslateHelper { 
    private currentLanguage: string; 
    private defaultLanguage = 'de-de'; 

    private language: Subject<any> = new Subject<any>(); 

    public language$ = language.asObservable(); 

    constructor(private route: ActivatedRoute) {} 

    public getCurrentLanguage() { 
     this.route.params.subscribe(params => { 
     this.language.next(params.lang) 
     }); 
    } 
} 


export class FooterComponent implements OnInit { 
    public lang; 

    constructor(private translateHelper: TranslateHelper) { } 

    ngOnInit() { 

    this.translateHelper.language$.subscribe(language => { 
     this.lang = language; 
    }): 
    } 

}