我有一个使用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
答案 0 :(得分:38)
您需要command-line: line 0: Bad configuration option: authpassword.allowfromcommandline
进入imports: [ TranslateModule ]
声明的任何模块。应用程序模块中的导入仅使管道可用于该模块中声明的组件。但是提供者/服务是从模块全局注册的(与组件,指令和管道不同)
答案 1 :(得分:5)
对于遇到这种情况的人来说,以下是您需要做的简单解决问题的步骤
翻译模块逻辑以及翻译加载程序和translateFactory存在于app.module.ts
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (http: Http) =>
new TranslateStaticLoader(http, './assets/i18n', '.json'),
deps: [Http]
})
],
在您的shared.module.ts(或任何其他模块)中,导入和导出Translate模块。
即:翻译模块应该是导入和导出数组的一部分。 SO和github中的大多数答案都提到导入模块但不导出模块。
@NgModule({
imports: [
// other imported modules here
TranslateModule
],
exports: [
// other exported modules here
TranslateModule]
答案 2 :(得分:1)
翻译模块:将翻译器用作管道(在模板上)
import { TranslateModule } from '@ngx-translate/core';
imports: [
CommonModule,
RouterModule, //Router Module
TranslateModule //Translate Module**
]
答案 3 :(得分:0)
我正在使用 Ionic 5。我在 home.page.html 中的 HTML
<h2 > {{'HOME.title' | translate }}</h2>
我遇到了错误
<块引用>找不到管道“翻译”
在 Visual Studio Code 中标记为红色错误。但无论如何,Ionic 应用程序正在使用 ionic serve 进行编译,并且翻译工作正常。
无论如何我设法消除了错误。正如上面已经提到的,一些指南没有强调导出模块也很重要。在我的情况下 home.module.ts
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 {}
答案 4 :(得分:0)
我只在一个“页面”上遇到过这个问题。如果缺少包含翻译管道的组件的声明,它也不会找到它。
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 {}