2017-10-21 151 views
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> 
+0

为什么不为你的翻译服务定义一个管道,这样你就可以将数据绑定到它的字符串?结果将是'{{'some_string'|翻译}} –

+0

谢谢 - 它的工作正常。你能解释为什么吗?我发现,'

'和'
{{ 'works' | translate }}
'工作,但是''不起作用。 –

+0

我的猜测是这是一个计时问题。例如,您正在尝试在文件加载或服务准备就绪之前进行翻译的情况。定义一个管道绕过它。 –

回答

0

为什么不DEFI为您的翻译服务提供一个管道,以便您可以将字符串数据绑定到它?结果将是{{'some_string' | translate}}