在 HTML 模板中进行简单的 ng2-translate 翻译

Question

我刚刚在构建时的早期添加了 ng2-translate (5.0.0) to our angular (2.4.1) + typescript (2.0.3) + webpack (2.1.0-beta.25) project. I'm defining translations manually 到 setTranslation 和内存中的一些词典。

当我在组件代码中使用 TranslateService 时，一切正常。现在我无法在 HTML 模板中为指令和管道找到正确的语法。

一组翻译有，例如：

en = {
  ...
  loginTitle: 'Please log in',
  ...
}

1) 管道

当模板有：

<h3 class="panel-title">{{ 'loginTitle' | translate }}</h3>

应用程序在运行时中断，在非常早的阶段，在 platformBrowserDynamic().bootstrapModule(AppModule) 上

Error while bootstrapping application. SyntaxError

2) 指令 + 内容

当模板有：

<h3 class="panel-title" translate>loginTitle</h3>

应用程序没有中断，但页面只显示未翻译的密钥，loginTitle。

3) 指令

当模板有：

<h3 class="panel-title" [translate]="'loginTitle'"></h3>

应用程序没有中断，但页面没有在应有的位置显示任何文本，DOM 节点不包含任何文本。

按照文档中的建议，我在应用程序模块级别（使用 forRoot）以及共享模块中导入了 TranslateModule，而共享模块又被其他区域模块导入.

我也尝试了其他变体，嵌套翻译，没有单引号等等，但没有成功。我做错了什么？

编辑在场景 #1 中，我能够记录有关初始错误的更多信息：

Error: Template parse errors: The pipe 'translate' could not be found

但这应该已经是 ng2-translate 的一部分了

Answer 1

经过反复试验并逐步 a plunker 后，我发现了问题所在。共享模块正在导入 TranslateModule，但它并没有导出它供其他人使用 (doh!)

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
import { TranslateModule } from 'ng2-translate';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    ...
    TranslateModule,
    ...
  ],
  exports: [
    ...
    TranslateModule, // <-- this was missing initially
  ],
})
export class SharedModule {
 ...
}

在 HTML 模板中进行简单的 ng2-translate 翻译

Make simple ng2-translate translation work in HTML template

angular

ng2-translate

1) 管道

2) 指令 + 内容

3) 指令