2

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

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

5
  • а где код для смены языка?
    – Grundy
    25 мая 2017 в 6:47
  • @Grundy, добавил код для смены языка, думал этот код не особо нужен, наверное, стоит создать полноценый тыкабельный пример, займусь этим позже
    – MasterAlex
    25 мая 2017 в 6:55
  • 1
    ну собственно, а с чего должен меняться перевод, если в changeLang никак не меняется lang из News от которого и зависит вывод?
    – Grundy
    25 мая 2017 в 7:05
  • Блин, а ведь действительно, спасибо за помощь, буду думать как это дело глобализировать, наверное, имеет смысл сделать сервис для языка
    – MasterAlex
    25 мая 2017 в 7:31
  • 1
    Вообще говоря, если ты уже используешь TranslateService, зачем делать дополнительно свой велосипед? почему не использовать его везде?
    – Grundy
    25 мая 2017 в 8:41

1 ответ 1

1

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


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


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

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

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

Например:

translate.onLangChange.subscribe((event: LangChangeEvent) => {
    this.lang = ['ru', 'en'].indexOf(event.lang);
});
1
  • добавил код в ngOnInit() в news.component, всё прекрасно работает
    – MasterAlex
    25 мая 2017 в 11:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.