fix(TranslateDirective): detect changes when params are updated

Fixes #423

Author: ocombe

src/translate.directive.ts

@@ -1,4 +1,4 @@
-import {Directive, ElementRef, AfterViewChecked, Input, OnDestroy} from '@angular/core';
+import {Directive, ElementRef, AfterViewChecked, Input, OnDestroy, ChangeDetectorRef} from '@angular/core';
 import {Subscription} from 'rxjs';
 import {isDefined} from './util';
 import {TranslateService, LangChangeEvent} from './translate.service';
@@ -11,6 +11,7 @@ import {DefaultLangChangeEvent} from "./translate.service";
 export class TranslateDirective implements AfterViewChecked, OnDestroy {
     key: string;
     lastParams: any;
+    currentParams: any;
     onLangChangeSub: Subscription;
     onDefaultLangChangeSub: Subscription;
     onTranslationChangeSub: Subscription;
@@ -22,9 +23,14 @@ export class TranslateDirective implements AfterViewChecked, OnDestroy {
         }
     }
 
-    @Input() translateParams: any;
+    @Input() set translateParams(params: any) {
+        if(this.currentParams !== params) {
+            this.currentParams = params;
+            this.checkNodes();
+        }
+    }
 
-    constructor(private translateService: TranslateService, private element: ElementRef) {
+    constructor(private translateService: TranslateService, private element: ElementRef, private _ref: ChangeDetectorRef) {
         // subscribe to onTranslationChange event, in case the translations of the current lang change
         if(!this.onTranslationChangeSub) {
             this.onTranslationChangeSub = this.translateService.onTranslationChange.subscribe((event: TranslationChangeEvent) => {
@@ -83,12 +89,11 @@ export class TranslateDirective implements AfterViewChecked, OnDestroy {
 
     updateValue(key: string, node: any, translations: any) {
         if(key) {
-            let interpolateParams: Object = this.translateParams;
-            if(node.lastKey === key && this.lastParams === interpolateParams) {
+            if(node.lastKey === key && this.lastParams === this.currentParams) {
                 return;
             }
 
-            this.lastParams = interpolateParams;
+            this.lastParams = this.currentParams;
 
             let onTranslation = (res: string) => {
                 if(res !== key) {
@@ -100,17 +105,18 @@ export class TranslateDirective implements AfterViewChecked, OnDestroy {
                 node.currentValue = isDefined(res) ? res : (node.originalContent || key);
                 // we replace in the original content to preserve spaces that we might have trimmed
                 node.textContent = this.key ? node.currentValue : node.originalContent.replace(key, node.currentValue);
+                this._ref.markForCheck();
             };
 
             if(isDefined(translations)) {
-                let res = this.translateService.getParsedResult(translations, key, interpolateParams);
+                let res = this.translateService.getParsedResult(translations, key, this.currentParams);
                 if(typeof res.subscribe === "function") {
                     res.subscribe(onTranslation);
                 } else {
                     onTranslation(res);
                 }
             } else {
-                this.translateService.get(key, interpolateParams).subscribe(onTranslation);
+                this.translateService.get(key, this.currentParams).subscribe(onTranslation);
             }
         }
     }

tests/translate.directive.spec.ts

@@ -11,8 +11,8 @@ import {TranslateService, TranslateModule} from '../index';
         <div #noKey translate>TEST</div>
         <div #withKey [translate]="'TEST'">Some init content</div>
         <div #withOtherElements translate>TEST1 <span>Hey</span> TEST2</div>
-        <div #withParams [translate]="'TEST'" [translateParams]="{value: 'ok'}">Some init content</div>
-        <div #withParamsNoKey translate [translateParams]="{value: 'ok'}">TEST</div>
+        <div #withParams [translate]="'TEST'" [translateParams]="value">Some init content</div>
+        <div #withParamsNoKey translate [translateParams]="value">TEST</div>
     `
 })
 class App {
@@ -22,6 +22,7 @@ class App {
     @ViewChild('withOtherElements') withOtherElements: ElementRef;
     @ViewChild('withParams') withParams: ElementRef;
     @ViewChild('withParamsNoKey') withParamsNoKey: ElementRef;
+    value = {value: 'ok'};
 
     constructor(viewContainerRef: ViewContainerRef) {
         this.viewContainerRef = viewContainerRef;
@@ -102,6 +103,20 @@ describe('TranslateDirective', () => {
         expect(fixture.componentInstance.withParamsNoKey.nativeElement.innerHTML).toEqual('It is ok');
     });
 
+    it('should update the translation when params change', () => {
+        // replace the content with the key
+        expect(fixture.componentInstance.withParams.nativeElement.innerHTML).toEqual('TEST');
+
+        translate.setTranslation('en', {"TEST": "It is {{value}}"});
+        translate.use('en');
+
+        expect(fixture.componentInstance.withParams.nativeElement.innerHTML).toEqual('It is ok');
+        fixture.componentInstance.value = {value: 'changed'};
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.withParams.nativeElement.innerHTML).toEqual('It is changed');
+    });
+
     it('should update the DOM when the lang changes', () => {
         expect(fixture.componentInstance.noKey.nativeElement.innerHTML).toEqual('TEST');