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

【问题标题】：ngx-translate doesn't display translation in server modengx-translate 在服务器模式下不显示翻译
【发布时间】：2017-10-21 20:59:43
【问题描述】：

我对 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>

【问题讨论】：

为什么不为您的翻译服务定义一个管道，以便您可以将字符串数据绑定到它？结果将是{{'some_string' | translate}}
谢谢 - 它工作正常。你能解释一下为什么吗？我发现 <div [innerHTML]="'works' | translate"></div> 和 <div>{{ 'works' | translate }}</div> 工作，但 <span [translate]="'works'"></span> 不起作用。
我猜这是时间问题。例如，您尝试在文件加载或服务准备好之前进行翻译。定义管道绕过它。
使用 DataBinding，绑定会在值更改时更新。因此，如果值从“”变为“某物”，那么“某物”将在那时通过管道传输。这就是为什么我认为这是一个时间问题。
我试过了，但我应该等 5 分钟 :)

标签： angular angular-universal ngx-translate

【解决方案1】：

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

【讨论】：