Question

我刚刚将ng2-translate（5.0.0）添加到我们的angular（2.4.1）+ typescript（2.0.3）+ webpack（2.1.0-beta.25）项目中。我在建设时期早些时候通过setTranslation和一些字典来定义translations manually。

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

一组翻译例如：

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

1）管道

当模板有：

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

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

中断

引导应用程序时出错。的SyntaxError

2）指令+内容

当模板有：

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

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

3）指令

当模板有：

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

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

根据文档中的建议，我在app-module级别（使用TranslateModule）以及共享模块中导入forRoot，而共享模块又由其他区域模块导入。 / p>

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

编辑在方案＃1中，我能够记录有关初始错误的更多信息：

错误：模板解析错误：无法找到管道'translate'

但这应该是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模板

1）管道

2）指令+内容

3）指令

1 个答案: