Обновление данных при смене языка в Angular2

391
26 мая 2017, 14:36

Здравствуйте, возникла проблема с выводом мультиязычного контента из базы. Данные прилетают в таком виде (один из айтемов новости):

{
  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, без перезагрузки страницы?

Answer 1

В коде changeLang никак не меняется свойство lang из компонента NewsComponent. Именно поэтому не меняется и view, в котором значения зависят именно от этого свойства.

Не совсем понятно зачем делать свой велосипед, если уже используется TranslateService. Проще всего использовать его везде

В любом случае, у TranslateService если свойство

onLangChange: EventEmitter слушающий событие изменения языка.

Можно использовать его в NewsComponent и в обработчике события, менять нужно свойство

Например:

translate.onLangChange.subscribe((event: LangChangeEvent) => {
    this.lang = ['ru', 'en'].indexOf(event.lang);
});
READ ALSO
Blob-изображение из JS в Python

Blob-изображение из JS в Python

На веб-странице есть обработчик события написанный на JavaScript, который позволяет по нажатию Ctrl+V загрузить из буфера обмена изображение в браузер...

330
сортировка в ejs array

сортировка в ejs array

структура users

346
Google chart, как вывести форматирование данные по оси

Google chart, как вывести форматирование данные по оси

Я строю график(yii2), в которых выводу по вертикали количество, а по горизонтали датуМассив данных у меня подобного типа:

321
Поменять метод кнопки на POST

Поменять метод кнопки на POST

есть кнопка - обратный звонок - сайт на фреймворке yii2, нужно что бы при запросе работал post запрос, сейчас срабатывает get по этому выдаёт ошибку...

294