2

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

1 回答 1

0

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

于 2017-10-21T12:59:43.340 回答