Question

我有一个ngx-translation的问题。它适用于两种模式 - 浏览器和放大器服务器。在浏览器模式下，一切正常，但在服务器模式下，翻译不能实现HTML源文件。

我认为问题是我的加载器 - 我用@ ngx-universal / translate-loader，但是当我在构造函数中添加translate.get来测试它并且它正常工作时：

translate.get('works', {}).subscribe((res: string) => {
  console.log(res);
});

这会在节点控制台中显示结果（＆＃34; - WORKS＆＃34;在＆＃34; en＆＃34;模式或＆＃34; - DZIALA＆＃34;在波兰模式下），所以问题出在模板呈现。

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);
  }
}

app.component.html

<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源文件中正确显示（例如，单词＆＃34; TEXT：＆＃34;或＆＃34; PL＆＃34;，＆＃34; EN＆＃34;，但是翻译在在TEXT之后的routerLink和word：没有显示。来源看起来像这样：

<!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>

Answer 1

为什么不为您的翻译服务定义管道，以便您可以将字符串数据绑定到它？结果将是{{'some_string' | translate}}

ngx-translate不在服务器模式下显示翻译

1 个答案: