即使在导航到另一个页面后，如何保持网站内容的翻译？ (ember.js ember-i18n)答案

【问题标题】：How do I keep website content translated even after navigating to another page? (ember.js ember-i18n)即使在导航到另一个页面后，如何保持网站内容的翻译？ (ember.js ember-i18n)
【发布时间】：2018-10-09 10:39:58
【问题描述】：

我目前正在使用 ember-i18n 在网络应用程序中实现多种语言，并正在寻找一种方法，让访问者和用户可以随时选择他们想要的语言。

我正在关注here 的教程，创建了一个下拉菜单，用于在菜单所在的网页上切换内容的语言。它设法在不刷新的情况下切换页面的语言。

但是，当我导航到新页面或刷新当前页面时，语言会恢复为默认语言。

如何配置网络应用程序以使所选语言在浏览网站时保持活动状态？我需要添加一些额外的东西，比如包括 cookie 吗？

菜单和当前环境设置如下：

config/environment.js

module.exports = function(environment) {
    var ENV = {
        ...

        i18n: {
            defaultLocale: 'en'}
        };
        ...
    }
}

app/app.js

App = Ember.Application.extend({
    locale: 'es',
    ...
});

app/components/language.js

import Ember from 'ember';

export default Ember.Component.extend({
    i18n: Ember.inject.service(),
    classNames: ['language-select'],

    locales: Ember.computed('i18n.locale', 'i18n.locales', function() {
        const i18n = this.get('i18n');
        return this.get('i18n.locales').map(function (loc) {
            return { id: loc, text: i18n.t('language-select.language.' + loc) };
        });
    }),

    actions: {
        setLocale() {
            this.set('i18n.locale', this.$('select').val());
        }
    }
});

app/templates/components/language-select.hbs

<select {{action 'setLocale' on='change'}}>
    {{#each locales as |loc|}}
        <option value="{{loc.id}}" selected={{is-equal loc.id i18n.locale}}>
            {{loc.text}}
        </option>
    {{/each}}
</select>

app/helpers/is-equal.js

import Ember from "ember";

export default Ember.Helper.helper(function([leftSide, rightSide]) {
    return leftSide === rightSide;
});

app/index.hbs

...
<p>{{language-select}}</p>
...

另外，我有我的语言环境。

【问题讨论】：

将所选语言存储在本地存储或服务器上

标签： javascript ember.js ember-cli ember-i18n

【解决方案1】：

此答案适用于版本 1.13 到至少 3.x。

让状态在页面刷新后仍然存在的最简单方法是使用位于 URL 中的路由查询参数。每条路由都可以从这些查询参数中读取或更改它们。刷新时，网址保持不变。

您可以在The Guides 中阅读有关查询参数的更多信息。

【讨论】：