Angular 找不到角度为2.0的平移管道
我有一个使用translateService的组件,但无法使用组件模板HTML上的管道翻译项目,我得到以下错误: 找不到管道“translate” app.module.tsAngular 找不到角度为2.0的平移管道,angular,translation,Angular,Translation,我有一个使用translateService的组件,但无法使用组件模板HTML上的管道翻译项目,我得到以下错误: 找不到管道“translate” app.module.ts import {BrowserModule} from "@angular/platform-browser"; import {NgModule} from "@angular/core"; import {HttpModule, Http} from "@angular/http"; import {Translate
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 {
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { HomePageRoutingModule } from './home-routing.module';
import {TranslateModule} from '@ngx-translate/core'; //IMPORT THE MODULE IN ANY PAGE
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
HomePageRoutingModule,
TranslateModule //IMPORT THE MODULE
],
declarations: [HomePage],
exports:[TranslateModule], //REMEMBER TO ADD THIS TO EXPORT IT AS WELL!!!
})
export class HomePageModule {}
预订组件
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>
{{'TESTKEY'| translate}
组件上服务的翻译工作正常,但我还需要使用管道翻译html,您需要
将:[TranslateModule]
导入到BookingComponent
声明的任何模块中。应用程序模块中的导入仅使管道可用于该模块中声明的组件。但是提供程序/服务是从模块中全局注册的(与组件、指令和管道不同)对于遇到此问题的人,这里简单介绍了解决此问题所需的步骤
i、 e:翻译模块应该是导入和导出数组的一部分。SO和github中的大多数答案都提到导入模块,但没有导出模块
翻译模块:将转换器用作管道(在模板上)
]我正在与爱奥尼亚5合作。home.page.HTML中的我的HTML
<h2 > {{'HOME.title' | translate }}</h2>
文档仅建议在使用SharedModule时必须导出TranslateModule。没有提到必须添加到根模块(即AppModule)的导出中。虽然添加到导出中使翻译管道为我工作。ngx translate docs中的引用:导出除共享外的其他模块中允许使用管道的模块;相反,在共享模块中导入模块允许使用它和共享模块中的管道。不需要导出TranslateModule。它仅适用于从该模块中共享的组件。仅导入有效。2021年在angular11项目中测试
import { TranslateModule } from '@ngx-translate/core';
imports: [
CommonModule,
RouterModule, //Router Module
TranslateModule //Translate Module**
<h2 > {{'HOME.title' | translate }}</h2>
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { HomePageRoutingModule } from './home-routing.module';
import {TranslateModule} from '@ngx-translate/core'; //IMPORT THE MODULE IN ANY PAGE
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
HomePageRoutingModule,
TranslateModule //IMPORT THE MODULE
],
declarations: [HomePage],
exports:[TranslateModule], //REMEMBER TO ADD THIS TO EXPORT IT AS WELL!!!
})
export class HomePageModule {}