web-dev-qa-db-ja.com

Angular 2.0 translate Pipeが見つかりませんでした

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も翻訳する必要があります

angulartranslation
18
Fabio

必要がある imports: [ TranslateModule ]がBookingComponentが宣言されているモジュールに挿入します。appモジュールのインポートでは、そのモジュールで宣言されたコンポーネントのみがパイプを使用できます。ただし、プロバイダー/サービスはモジュールからグローバルに登録されます（コンポーネント、ディレクティブ、パイプとは異なります）

42
Paul Samsotha

これに遭遇した人のために、問題を解決するために簡単に行う必要がある手順を以下に示します

  1. App.module.tsにあるtranslate loaderとtranslateFactoryとともにtranslateモジュールロジックを持っている

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

  2. Shared.module.ts（または他のモジュール）で、Translateモジュールをインポートおよびエクスポートします。
    i.e .:翻訳モジュールは、インポート配列とエクスポート配列の両方の一部である必要があります。 SOおよびgithubのほとんどの回答では、モジュールをインポートするが、エクスポートしないことに言及しています。

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

7
Jonathan Cardoz