Question

我想知道如何在Web组件中使用i18n-node。我已经在nodejs express中实现了https://github.com/mashpie/i18n-node，并且在index.ejs中运行良好。如何在浅色元素组件中传递响应i18n: res，但我在Web组件中进行了字符串化处理，但我尝试了但仍能正常工作，并且得到了converted circular structure error。我想知道如何在组件内部显示翻译后的文本，我是否应该使用任何其他软件包来实现它。

var express = require('express');
var homeRouter= require('./routes/home');
var i18n = require("i18n");
var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

i18n.configure({
locales:['en', 'zh'],
directory: __dirname + '/locales',
objectNotation: true
});
app.use(i18n.init);
app.use('/:lang', homeRouter);

//home.js
var express = require('express');
var router = express.Router();
var i18n = require('i18n');
router.get('/', function (req, res) {
  i18n.setLocale(req,req.baseUrl.split('/')[1]);
  res.render("index.ejs", {i18n: res}) 
}

//index.ejs
<div>
 <h1><%=i18n.__("Welcome")%></h1>
 <my-element translate="<%=i18n%>"> // passing the response of translation to component
 </my-element> 
</div>


//en.json
{
  "Welcome": "Hi , Welcome to my site",
  "list": "Discover the List of Travelling Cities"
}

//myElement.js

import { LitElement, html, css
} from "https://unpkg.com/@polymer/lit-element/lit-element.js?module";
export class Element extends LitElement {

  static get properties() {
    return {
       translate: {type: Object}
    }
 constructor() {
    super();
}

render(){
  <p>${this.translate.list}</p> // not displaying
} 
}

如何在Web组件中显示i18n节点的响应

0 个答案: