Hello,
I use pipes for translations, and when I put these "piped" tags inside an
ngIf div, the translation does not show up
details : the pies do a subscribe to a service observable
when the service gets its json it puts "true" in its stream wich is
supposed to triggers all pipes who subsribed to that observable
works pretty neat for all my application so far, but inside an ngif, it
does not work
service:
//------------------------------------------------------------------------------------------------------------------------------------------
@Injectable()
export class TranslateService
{
private trads={};
private language="en";
public translationLoaded : Observable<boolean>;
private translationLoadedObserver : Observer<boolean>;
constructor(private http:Http,private cookieService:CookieService )
{
this.getLanguage();
this.translationLoaded = Observable.create((observer
:Observer<boolean>)=> pipes will subscribe to this observable and get
trigered below with .next(true)
{
this.translationLoadedObserver = observer;
this.getJson();
}).share();
}
getJson()
{
this.http.get("app/translations/"+this.language+".json")
.map(res => res.json())
.subscribe(
res =>
{
this.trads = res;
this.translationLoadedObserver.next(true); //add true
to the observable
},
error =>
{
console.log(error);
},
);
}
getTranslation = function(text:string) : string
{
console.log("getTranslation("+text+") => "+this.trads[text]);
if(this.trads[text])
return this.trads[text];
else
return "<<<"+text+">>>"
};
getLanguage()
{
this.language=this.cookieService.get("edenred_catalog_language");
return this.language;
}
setLanguage(language:string)
{
this.language=language;
this.cookieService.put("edenred_catalog_language",language);
this.getJson();
}
}
pipe :
//------------------------------------------------------------------------------------------------------------------------------------------
import { Pipe, PipeTransform, ChangeDetectorRef } from '@angular/core';
import { Observable } from "rxjs/Observable";
import { Subscription } from "rxjs/Subscription";
import { Observer } from "rxjs/Observer";
import 'rxjs/add/operator/map'
import { TranslateService } from './translate.service'
@Pipe({
name: 'translate',
pure: false // data needs to be updated when translations are received
})
export class TranslatePipe implements PipeTransform
{
loaded = false;
translationLoadedSub:Subscription ;
value="";
constructor(private ref :ChangeDetectorRef,private
translateService:TranslateService)
{
}
transform(text: string, args: string[]): string
{
if(!this.translationLoadedSub)
{
this.translationLoadedSub =
this.translateService.translationLoaded.subscribe(
(data) => {
this.value =
this.translateService.getTranslation(text); <<<<<<<<<<<<<<<<<<<< tshi is
not executed when the pipe is on a tag inside the ngIF
this.ref.markForCheck();
this.loaded = true;
});
}
if (this.loaded) { // needed ?
this.value = this.translateService.getTranslation(text);
}
return this.value;
}
_dispose(): void
{
//if(isPresent(this.translationLoadedSub))
{
this.translationLoadedSub.unsubscribe();
this.translationLoadedSub = undefined;
}
}
ngOnDestroy(): void {
this._dispose();
}
}
component template:
//------------------------------------------------------------------------------------------------------------------------------------------
<div class="pageTitleWrapper">
<h1>{{ "productTitle" | translate }}</h1>
</div>
<div *ngIf="product">
<div>
<label>{{ "productNameFR" | translate }}</label>
<input class="product-NamePlaceholder"
[(ngModel)]="product.nameFR"/>
<label>{{ "productDescriptionFR" | translate }}</label>
<textarea [(ngModel)]="product.descriptionFR" ></textarea>
<label>{{ "productNameNL" | translate }}</label>
<input class="product-NamePlaceholder"
[(ngModel)]="product.nameNL"/>
<label>{{ "productDescriptionNL" | translate }}</label>
<textarea [(ngModel)]="product.descriptionNL" ></textarea>
</div>
<div>
<label>id: </label>{{ product.id }}
</div>
</div>
thanks
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
