Javascript 即使在导航到另一个页面后，我如何保持网站内容的翻译？（ember.js ember-i18n）

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

我正在学习一个教程，创建一个下拉菜单，在菜单所在的网页上切换内容的语言。它可以在不刷新的情况下切换页面的语言

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

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

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

config/environment.js

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

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

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

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());
        }
    }
});

<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>

import Ember from "ember";

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

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

app/app.js

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

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

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

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());
        }
    }
});

<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>

import Ember from "ember";

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

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

app/components/language.js

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

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

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

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());
        }
    }
});

<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>

import Ember from "ember";

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

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

应用程序/模板/组件/语言选择.hbs

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

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

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

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());
        }
    }
});

<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>

import Ember from "ember";

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

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

app/index.hbs

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

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

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

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());
        }
    }
});

<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>

import Ember from "ember";

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

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

。。。
{{语言选择}}

...

---

此外，我有自己的语言环境。

这个答案适用于1.13版到至少3.x版

使状态在页面刷新后保持有效的最简单方法是使用路由查询参数，它位于URL中。每个路由都可以读取或更改这些查询参数。刷新时，url保持不变

---

您可以在中阅读有关查询参数的详细信息。

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