角度2.0パイプ

Question

を見つけることができませんでした私はtranslateServiceを使用するコンポーネントを持っていますが、それはコンポーネントテンプレートHTML上のパイプでアイテムを翻訳することはできません翻訳し、私は次のエラーを取得する：

The pipe 'translate' could not be found

アプリ。 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> 

コンポーネント上のサービスとの翻訳が正常に動作しますが、私はまた、あなたがBookingComponentがで宣言しているものは何でもモジュールにimports: [ TranslateModule ]に必要な配管

Answer 1

とHTMLを変換する必要があります。アプリでインポートモジュールは、そのモジュールで宣言されたコンポーネントに対してのみパイプを使用可能にします。

Answer 2

はい、@ peeskilletは言ったことはありますが、複数のモジュールでパイプを使用する必要がある場合は、共有モジュールが必要になります。共有モジュールを使用している場合は、共有モジュールにインポートされたモジュールをエクスポートする必要があります。ここでは、この全体でお越しの方のために

Answer 3

あなたが問題に

1. を修正するために一言で言えば行うために必要な手順は、モジュールロジックは、ローダとtranslateFactoryの存在はapp.moduleに変換するとともに、変換持っています。あなたのshared.module.tsでTS

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

2. （または他のモジュール）、インポートおよび翻訳モジュールをエクスポートします。
   ：つまり、翻訳モジュールは、インポートとエクスポートの両方の配列の一部でなければなりません。 SOとgithubのほとんどの答えは、モジュールをインポートしていますが、エクスポートはしていません。感謝

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