0

我刚刚将ng2-translate (5.0.0) 添加到我们的 angular (2.4.1) + typescript (2.0.3) + webpack (2.1.0-beta.25) 项目中。在构建的早期，我正在通过内存中的一些字典手动定义翻译。setTranslation

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

一组翻译有，例如：

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

1) 管道

当模板具有：

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

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

引导应用程序时出错。语法错误

2) 指令+内容

当模板具有：

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

应用程序不会中断，但页面只显示未翻译的键，loginTitle.

3) 指令

当模板具有：

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

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

正如文档中所建议的那样，我已经TranslateModule在应用模块级别（使用forRoot）以及共享模块中进行了导入，而共享模块又被其他区域模块导入。

我还尝试了其他变体，有嵌套翻译，没有单引号等等，但没有运气。我究竟做错了什么？

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

错误：模板解析错误：找不到管道“翻译”

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

4

1 回答 1

1

经过一些试验和错误，并在一步一步地工作之后，我发现了这个问题。共享模块正在导入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 {
 ...
}
于 2016-12-29T20:23:11.757 回答