1. ホーム
  2. angular

[解決済み] Angular 2.0 翻訳パイプが見つかりません。

2022-02-10 22:32:44

質問

translateServiceを使用したコンポーネントがあるのですが、Component Template HTMLのパイプでアイテムを翻訳することができず、以下のエラーが発生します。

パイプ 'translate' が見つかりませんでした。

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

どのように解決するのですか?

必要なのは imports: [ TranslateModule ] をどのようなモジュールであっても BookingComponent で宣言されています。appモジュールでのimportは、そのモジュールで宣言されたコンポーネントに対してのみパイプを利用できるようにします。しかし、プロバイダやサービスはモジュールからグローバルに登録されます(コンポーネント、ディレクティブ、パイプとは異なります)。