Tôi cố gắng sử dụng các công cụ quốc tế hóa chính thức với góc phổ quát. Cho đến nay tôi có thể dịch các vẽ phía khách hàng sử dụng các thủ tục sau đây (nhờ câu trả lời này https://stackoverflow.com/a/40930110/1110635):Góc phổ quát với i18n (Hiển thị phía máy chủ)
tôi thêm "i18n" thuộc tính như đã nêu trong tài liệu trong các mẫu của tôi:
./src /+app/about/about.component.html:
<h1 i18n="H1 of the about component">About</h1>
...
Sau đó, tôi chạy:
./node_modules/.bin/ng-xi18n
để tạo ra cơ sở m essages.xlf tệp.
Sau đó, tôi sao chép tệp này cho từng ngôn ngữ tôi muốn hỗ trợ dưới dạng "tin nhắn. [Locale] .xlf" trong thư mục "locale". Khi đã sẵn sàng, tôi tạo ra một "thông điệp [locale] .ts." Cho mỗi tập tin xlf chứa một chuỗi xuất khẩu nội dung của nó:
./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>
`;
Cuối cùng, client.ts tôi tập tin trông giống như sau:
./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);
Tính năng này hoạt động và làm cho ứng dụng "phía máy khách" hoạt động như mong đợi. "Giới thiệu về" được thay thế bằng "Một đề xuất". NHƯNG, vì góc phổ quát trước khi hiển thị trang ở phía máy chủ bằng cách thể hiện văn bản không được dịch cho đến khi khởi động phía máy khách được thực hiện.
Vì vậy, khi bạn lần đầu tiên đi trên trang bạn thấy "Về" trong khoảng 1 giây trước khi đá phía khách hàng trong một thay thế nó bằng "Một Propos".
Giải pháp có vẻ hiển nhiên, chỉ cần chạy dịch vụ dịch ở phía máy chủ! Nhưng tôi không có ý tưởng làm thế nào để làm điều đó.
server.ts My trông như thế này:
./src/server.ts
[...]
// i18n
import { TRANSLATIONS, TRANSLATIONS_FORMAT, 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: TRANSLATION_FR},
{provide: TRANSLATIONS_FORMAT, useValue: "xlf"},
{provide: LOCALE_ID, 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}`);
});
Tôi không có quyền truy cập trực tiếp đến bootstrapModule phương pháp như trên các mặt hàng. Các nhà cung cấp các nhà cung cấp trên đối tượng tham số "createEngine" đã có sẵn trong original server.ts code.
Tôi đang thiếu gì?
Hi, Tôi đang cố gắng để làm điều này nhưng tôi không muốn sử dụng * .ts file cho dịch nhưng nó rất khó. Vì vậy, bạn đã được giải quyết nó? – IvanMoreno
Không, tôi đang sử dụng ng2-dịch bởi vì tôi không tìm cách làm cho mô-đun gốc hoạt động ở phía máy chủ. Nhưng bạn có thể làm điều đó theo cách tôi mô tả ở trên và để công cụ xây dựng của bạn (webpack hoặc gulp hoặc bất kỳ thứ gì khác) tạo tệp .ts từ tệp .xlf. – Stnaire
Nó không thực sự giải quyết vấn đề, nhưng bạn đã xem xét việc sử dụng mô-đun nx-dịch thông qua rộng? https://github.com/ngx-translate/core –