分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了带有i18n的Angular Universal(服务器端渲染)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我尝试使用角度通用的Angular官方国际化工具。到目前为止，我能够使用以下过程翻译客户端渲染(感谢此答案 https://stackoverflow.com/a/40930110/1110635)：

我在模板中的文档中添加了“i18n”属性：

./src/ app / about / about.component.html：

<h1 i18n="H1 of the about component">About</h1>
...

然后我跑：

./node_modules/.bin/ng-xi18n

生成基本messages.xlf文件。

然后，我将每个要支持的语言环境的文件复制为“locale”文件夹中的“messages。[locale] .xlf”。
准备好后，我为每个包含其内容的导出字符串的xlf文件创建“messages。[locale] .ts”：

./locale/messages.fr.ts：

// TRANSLATION_FR is only for "messages.fr.ts" of course.
// I would create a TRANSLATION_ES const inside "messages.es.ts" for spanish for example.
export const TRANSLATION_FR: String = `<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="004b222ff9ef9dd4771b777950ca1d0e4cd4348a" datatype="html">
        <source>About</source>
        <target>A propos</target>
        <note priority="1" from="description">H1 of the about component</note>
      </trans-unit>
    </body>
  </file>
</xliff>
`;

最后，我的client.ts文件如下所示：

./src/client.ts：

[...]

// i18n
import { TRANSLATIONS,TRANSLATIONS_FORMAT,LOCALE_ID  } from '@angular/core';
import { TRANSLATION_FR } from '../locale/messages.fr';

import { MainModule } from './browser.module';

export const platformRef = platformUniversalDynamic();

// on document ready bootstrap Angular 2
export function main() {
  return platformRef.bootstrapModule(MainModule,{
      providers: [
          {provide: TRANSLATIONS,useValue: TRANSLATION_FR},{provide: TRANSLATIONS_FORMAT,useValue: "xlf"},{provide: LOCALE_ID,useValue: 'fr'}
      ]
  });
}
bootloader(main);

这可以使“客户端”应用程序按预期工作。 “关于”被“A propos”取代。但是，因为角度通用预渲染服务器端的页面使用表达文本在客户端引导完成之前不会被翻译。

因此，当您第一次进入页面时，您会看到“关于”大约1秒钟，然后客户端才会用“A propos”替换它。

解决方案似乎很明显，只需在服务器端运行翻译服务！但我不知道该怎么做。

我的server.ts看起来像这样：

./src/server.ts

[...]

// i18n
import { TRANSLATIONS,LOCALE_ID  } from '@angular/core';
import { TRANSLATION_FR } from '../locale/messages.fr';

const app = express();
const ROOT = path.join(path.resolve(__dirname,'..','dist'));

// Express View
app.ENGIne('.html',createENGIne({
    ngModule: MainModule,providers: [
      /**
       * HERE IS THE IMPORTANT PART.
       * I tried to declare providers but it has no effect.
       */
      {provide: TRANSLATIONS,useValue: 'fr'}
    ]
}));
app.set('port',process.env.PORT || 3000);
app.set('views',ROOT);
app.set('view ENGIne','html');
[...]

function ngApp(req,res) {
    res.render('index',{
      req,res,preboot: false,baseUrl: '/',requesturl: req.originalUrl,originUrl: `http://localhost:${ app.get('port') }`
    });
}
app.get('*',ngApp);

// Server
let server = app.listen(app.get('port'),() => {
    console.log(`Listening on: http://localhost:${server.address().port}`);
});