Merge pull request #48 from tflori/feature-observeTranslate

Feature observe translate

Author: tflori

docs/Translator.md

@@ -27,7 +27,7 @@ resolved once language got loaded.
 Example:
 
 ```ts
-translateService.waitForTranslation().then(() => this.translation = translateService.instant('TEXT'));
+translator.waitForTranslation().then(() => this.translation = translator.instant('TEXT'));
 ```
 
 ### translate(keys: string|string[], params?: any, lang?: string): Promise<string|string[]>
@@ -42,7 +42,19 @@ case the promise get resolved with the keys itself.
 If keys is an array you get an array with the same order back.
 
 ```ts
-translateService.translate(['STATUS_OPEN', 'STATUS_CLOSED']).then((translations) => {
+translator.translate(['STATUS_OPEN', 'STATUS_CLOSED']).then((translations) => {
+  this.translations['open'] = translations[0];
+  this.translations['closed'] = translations[1];
+});
+```
+
+### observe(keys: string|string[], params?: any): Observable<string|string[]>
+
+Instead of using the language given it is using the current language and pushes the translation for the new language
+every time when the language got changed.
+
+```ts
+translator.observe(['STATUS_OPEN', 'STATUS_CLOSED']).subscribe((translations) => {
   this.translations['open'] = translations[0];
   this.translations['closed'] = translations[1];
 });
@@ -54,11 +66,11 @@ Basically it is the same like `translate` but it does not wait for translation a
 you take a look in the code you will see that `translate` is using `instant` after translations got loaded.
 
 ```ts
-translateService.waitForTranslation().then(() => {
+translator.waitForTranslation().then(() => {
   this.translations = {
     statuses: {
-      open: translateService.instant('STATUS_OPEN'),
-      closed: translateService.instant('STATUS_CLOSED')
+      open: translator.instant('STATUS_OPEN'),
+      closed: translator.instant('STATUS_CLOSED')
     }
   }
 });

src/Translator.ts

@@ -112,6 +112,28 @@ export class Translator {
         });
     }
 
+    /**
+     * Translate keys for current language and return an observable.
+     *
+     * The observable gets new translations if the language get changed.
+     *
+     * @param {string|string[]} keys
+     * @param {any?} params
+     * @returns {Observable<string|string[]>}
+     */
+    public observe(keys: string | string[], params: any = {}): Observable<string | string[]> {
+        return new Observable<string | string[]>((observer: Observer<string | string[]>) => {
+            this.translate(keys, params).then((translations: string | string[]) => {
+                observer.next(translations);
+            });
+            this.languageChangedObservable.subscribe(() => {
+                this.translate(keys, params).then((translations: string | string[]) => {
+                    observer.next(translations);
+                });
+            });
+        });
+    }
+
     /**
      * Translate keys for current language or given language (lang) synchronously.
      *
@@ -265,7 +287,8 @@ export class Translator {
      * @returns {any}
      */
     private pipeTransform(value: any, pipeExpression: string, __context: any): any {
-        let [pipeName, ...argExpressions] = pipeExpression.split(":");
+        let argExpressions = pipeExpression.split(":");
+        let pipeName = argExpressions.shift();
         let args = [];
         let argExpression: string = "";
         while (argExpressions.length) {

tests/Translator.spec.ts

@@ -420,6 +420,59 @@ describe("Translator", () => {
             }));
         });
 
+        describe("observe", () => {
+            let translateSpy: jasmine.Spy;
+
+            beforeEach(() => {
+                translateSpy = spyOn(translator, "translate").and.callFake((keys: string|string[], params?: any) => {
+                    return Promise.resolve(keys);
+                });
+            });
+
+            it("returns an observable", () => {
+                let result = translator.observe("HELLO");
+
+                expect(result).toEqual(jasmine.any(Observable));
+            });
+
+            it("is using translate", () => {
+                translator.observe("HELLO").subscribe();
+
+                expect(translator.translate).toHaveBeenCalledWith("HELLO", {});
+            });
+
+            it("pushes the result from translate to observable", fakeAsync(() => {
+                let spy = jasmine.createSpy("subscriber");
+                translator.observe("HELLO").subscribe(spy);
+
+                JasminePromise.flush();
+
+                expect(spy).toHaveBeenCalledWith("HELLO");
+            }));
+
+            it("translates again when language got changed", () => {
+                translatorConfig.setOptions({ providedLanguages: ["en", "de"]});
+
+                translator.observe("HELLO").subscribe();
+                translator.language = "de";
+
+                expect(translator.translate).toHaveBeenCalledTimes(2);
+            });
+
+            it("pushes the result for the new language", fakeAsync(() => {
+                let spy = jasmine.createSpy("subscriber");
+                translator.observe("HELLO").subscribe(spy);
+
+                JasminePromise.flush();
+                translateSpy.and.returnValue(Promise.resolve("Hallo"));
+                translator.language = "de";
+                JasminePromise.flush();
+
+                expect(spy).toHaveBeenCalledWith("HELLO");
+                expect(spy).toHaveBeenCalledWith("Hallo");
+            }));
+        });
+
         describe("instant", () => {
             let loaderPromiseResolve: (...params: any[]) => void;