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

Question

我对 ngx 翻译有疑问。它在两种模式下工作——浏览器和服务器。在浏览器模式下一切正常，但在服务器模式下翻译不符合 HTML 源文件。

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

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

这会在节点控制台中显示结果（"en" 模式下的“- WORKS”或抛光模式下的“- 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);
  }
}

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 源文件中正确显示（例如单词 "TEXT:" 或 "PL"、"EN"，但翻译在 routerLink 上，而单词在 TEXT 之后: 不显示。来源如下所示：

<!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 在服务器模式下不显示翻译

ngx-translate doesn't display translation in server mode

angular-universal

ngx-translate

angular