Здравствуйте, возникла проблема с выводом мультиязычного контента из базы. Данные прилетают в таком виде (один из айтемов новости):
{
date: "2017-05-19",
link: "news-1",
content: [
{
language: "ru",
title: "Новость 1",
desc: "Краткое описание новости 1",
},
{
language: "en",
title: "News 1",
desc: "Small description for news 1",
}
]
}
news.service.ts
export class NewsService {
constructor (private _http: Http) {}
getNews() {
return this._http.get('/api/news/search')
.map(res => res.json());
};
}
news.ts
export class News {
date: string;
title: string;
desc: string;
}
news.component.ts
export class NewsComponent implements OnInit {
news: News[];
lang: number;
constructor (
private _newsService: NewsService
) {};
getNews(): void {
this._newsService
.getNews()
.subscribe(
news => this.news = news,
error => console.log(error),
() => console.dir('Success')
)
}
ngOnInit(): void {
this.lang = ['ru', 'en'].indexOf(localStorage.getItem('localeId'));
this.getNews();
}
}
news.componentn.html
<h3>Newslist</h3>
<ul class="news">
<li *ngFor="let item of news">
<div class="news-date">{{ item.date }}</div>
<div class="news-title">{{ item.content[lang].title }}</div>
<div class="news-description">{{ item.content[lang].desc }}</div>
</li>
</ul>
Код для смены языка находится в app.component.ts:
export class AppComponent {
private langs = ['ru', 'en'];
constructor(private translate: TranslateService) {
translate.addLangs(this.langs);
if(!localStorage.getItem('localeId')) {
let browserLang = translate.getBrowserLang();
translate.use(browserLang.match(/en|ru/) ? browserLang : 'ru');
localStorage.setItem('localeId', browserLang.match(/en|ru/) ? browserLang : 'ru');
} else {
translate.setDefaultLang(localStorage.getItem('localeId'));
}
}
changeLang() {
let other = localStorage.getItem('localeId') == 'en' ? 'ru' : 'en';
this.translate.use(other);
localStorage.setItem('localeId', other);
}
}
В принципе, всё работает нормально, новости выводятся, если бы не одно "НО", при изменении языка контент не обновляется. При этом если изменить язык и обновить страницу, язык подгружается из localStorage
и данные уже на другом языке.
Подскажите, пожалуйста, как лучше реализовать обновление таких переменных, как item.content[lang].title
, без перезагрузки страницы?
News
от которого и зависит вывод?