EmberJS ember seo 如何使用多语言?

liuxufei · 2019年04月17日 · 最后由 liuxufei 回复于 2019年04月18日 · 250 次阅读

使用 ember-intl 多语言。

链接:https://github.com/ember-intl/ember-intl

使用 ember-seo-meta-tags 做 seo。

链接:https://www.npmjs.com/package/ember-seo-meta-tags

如何在 ember-seo-meta-tags 中使用多语言?

共收到 6 条回复

ember-intl 有一个 IntlService,把它注入到你定义 seo meta tags 的地方,通常是路由或另外一个服务,然后调用 this.intl.t 就可以了,用法和在模板上的 {{t ...}} 一样(传参相同)。

nightire 回复

非常感谢你的解答,我看了这两个模块不少文档和文章,也测试了好多次,一直没能解决。

多语言目前可以正常使用。

但是在 ember-seo-meta-tags 中使用就有问题。

根据 https://github.com/ember-intl/ember-intl/blob/master/docs/ember-service-api.md 给的文档。

在服务中使用

a、第一种方式

import Ember from 'ember';

export default Ember.Service.extend({
  intl: Ember.inject.service(),

  'index': {
    title: this.intl.t('site.title'),
  },
});

出错

Uncaught TypeError: Cannot read property 'intl' of undefined

文件解析为:

define("site/services/tags-data", ["exports"], function (_exports) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.default = void 0;

  var _default = Ember.Service.extend({
    intl: Ember.inject.service(),
    'index': {
      title: (void 0).intl.t('site.title')
    }
  });
  _exports.default = _default;
});

b、第二种方式

import Ember from 'ember';

export default Ember.Service.extend({
  intl: Ember.inject.service(),

  'index': {
    title: this.get('intl').t('site.title'),
  },
});

出错

Uncaught TypeError: Cannot read property 'get' of undefined

文件解析为:

define("site/services/tags-data", ["exports"], function (_exports) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.default = void 0;

  var _default = Ember.Service.extend({
    intl: Ember.inject.service(),
    'index': {
      title: (void 0).get('intl').t('site.title')
    }
  });

  _exports.default = _default;
});

在路由中使用也是类似的错误,我是哪里使用有误?

解决,例子:

import Ember from 'ember';

export default Ember.Service.extend({
  intl: Ember.inject.service(),

  'index': Ember.computed(function () {
    return {
      'title': this.get('intl').t('site.title')
    };
  }),
});

路由也是类似的方法。

liuxufei 回复

Sorry,昨天有事没有继续关注这个帖子。你后来的解法是对的。

nightire 回复

谢谢你的解答,让我几次没解决差点就想放手了。(^_−)−☆

出现新的问题,切换多语言时,标题无法自动更新,又要找方法了¯_(ツ)_/¯

目前切换语言用的是如下方式:

import Ember from 'ember';
import config from '../config/environment';

export default Ember.Route.extend({
  intl: Ember.inject.service(),

  beforeModel() {
    var lang = localStorage.getItem('lang') || config.LANG;
    this.setLocale(lang);
  },

  setLocale: function (lang) {
    this.get('intl').setLocale(lang);
  },

  actions: {
    lang: function(lang) {
      localStorage.setItem('lang', lang);
      this.setLocale(lang);
    }
  }
});
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册