1
我在使用ngx-translation时遇到问题。它在两种模式下工作 - 浏览器&服务器。 在浏览器模式下一切正常,但在服务器模式下,翻译不能满足HTML源文件。ngx-translate在服务器模式下不显示翻译
我认为一个问题是我的装载机 - 我的用户@ NGX的通用/翻译装载机,但是当我在构造函数中添加translate.get
,以测试它,它工作正常:
translate.get('works', {}).subscribe((res: string) => {
console.log(res);
});
这个节目会导致节点控制台(“ - WORKS”处于“en”模式或“ - DZIALA”处于波兰模式),所以问题出现在模板呈现时。
app.component.ts
import {Component, OnInit} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
constructor(public translate: TranslateService) {
translate.setDefaultLang('en');
translate.use('en');
translate.get('works', {}).subscribe((res: string) => {
console.log(res);
});
}
ngOnInit() {
}
swtitchLang(lang: string) {
this.translate.use(lang);
}
}
<button (click)="swtitchLang('pl')">PL</button>
<button (click)="swtitchLang('en')">EN</button>
<ul>
<li><a routerLink="/" [translate]="'menu.home'"></a></li>
<li><a routerLink="about" [translate]="'menu.about'"></a></li>
</ul>
<h4>TEXT: <span [translate]="'works'"></span></h4>
<router-outlet></router-outlet>
不用翻译文本是我的HTML源文件正常显示(例如单词 “text:” app.component.html或“PL ”,‘EN’,但文本之后对译routerLink和字:不显示来源是这样的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Home</title>
<base href="/">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet">
<style ng-transition="ang4-seo-pre"></style>
<meta name="author" content="Coursetro.com">
<meta name="keywords" content="angular seo, angular 4 universal, etc">
<meta name="description" content="This is my Angular SEO-based App, enjoy it!">
</head>
<body>
<app-root _nghost-c0="" ng-version="4.4.6">
<button _ngcontent-c0="">PL</button>
<button _ngcontent-c0="">EN</button>
<ul _ngcontent-c0="">
<li _ngcontent-c0="">
<a _ngcontent-c0="" routerLink="/" href="/"></a>
</li>
<li _ngcontent-c0="">
<a _ngcontent-c0="" routerLink="about" href="/about"></a>
</li>
</ul>
<h4 _ngcontent-c0="">TEXT:
<span _ngcontent-c0=""></span>
</h4>
<router-outlet _ngcontent-c0=""></router-outlet>
</app-root>
<script type="text/javascript" src="inline.3df9f7567cf0da6bbb0f.bundle.js"></script>
<script type="text/javascript" src="polyfills.14173651b8ae6311a4b5.bundle.js"></script>
<script type="text/javascript" src="vendor.aeb6cf8ce8b6e01353e0.bundle.js"></script>
<script type="text/javascript" src="main.203dfaf526cd10912720.bundle.js"></script>
</body>
</html>
为什么不为你的翻译服务定义一个管道,这样你就可以将数据绑定到它的字符串?结果将是'{{'some_string'|翻译}} –
谢谢 - 它的工作正常。你能解释为什么吗?我发现,'
'和'我的猜测是这是一个计时问题。例如,您正在尝试在文件加载或服务准备就绪之前进行翻译的情况。定义一个管道绕过它。 –