无法找到Angular 2.0 translate管道

Question

我有一个使用translateService的组件,但是不可能在组件模板HTML上使用管道翻译项目,我得到以下错误:

无法找到管道"翻译"

app.module.ts

import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {HttpModule, Http} from "@angular/http";
import {TranslateModule, TranslateLoader, TranslateStaticLoader} from 'ng2-translate';
import {AppComponent} from "./app.component";

@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpModule,
TranslateModule.forRoot({
    provide: TranslateLoader,
    useFactory: (http: Http) => new TranslateStaticLoader(http, './assets/i18n', '.json'),
    deps: [Http]
   })
],
bootstrap: [AppComponent]
})
export class AppModule {
}

booking.component.ts

import {Component, OnInit} from '@angular/core';
import {BookingComponent} from './booking.component';
import {TranslateService} from 'ng2-translate';

@Component({
   selector: 'app-booking',
   templateUrl: './booking.component.html',
   styleUrls: ['./booking.component.css']
})

export class BookingComponent implements OnInit {
  constructor(private translate: TranslateService
  ) {
    translate.setDefaultLang('de');
    translate.use('de');
};

ngOnInit() {
}
}

booking.component.html

<p>{{'TESTKEY' | translate }}</p>

组件上的服务转换工作正常,但我需要用管道翻译html

Answer 1

您需要imports: [ TranslateModule ]进入BookingComponent声明的任何模块.app模块中的导入仅使管道可用于在该模块中声明的组件.但是提供者/服务是从模块全局注册的(与组件,指令和管道不同)

Answer 2

对于遇到这种情况的人来说,以下是您需要做的简单步骤来解决问题

1. 翻译模块逻辑以及app.module.ts中存在的translate loader和translateFactory

   TranslateModule.forRoot({ provide: TranslateLoader, useFactory: (http: Http) => new TranslateStaticLoader(http, './assets/i18n', '.json'), deps: [Http] }) ],

2. 在您的shared.module.ts(或任何其他模块)中,导入和导出Translate模块.
   即:翻译模块应该是导入和导出数组的一部分.SO和github中的大多数答案都提到导入模块但不导出模块.

   @NgModule({ imports: [ // other imported modules here TranslateModule ], exports: [ // other exported modules here TranslateModule]

Answer 3

我只在一个“页面”上遇到这个问题。如果包含翻译管道的组件的声明丢失，它也找不到它。

const routes: Routes = [
  {
    path: '',
    component: InventoryPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    TranslateModule.forChild(),
    RouterModule.forChild(routes),
    SharedComponentModule
  ],
  declarations: [
    InventoryPage // << Check your declaration
  ]
})
export class InventoryPageModule {}