找不到 Angular 2.0 转换管道

Posted 2023-02-16

【中文标题】找不到 Angular 2.0 转换管道

【英文标题】：Angular 2.0 translate Pipe could not be found

【发布时间】：2017-03-25 03:03:33

【问题描述】：

我有一个使用 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

【参考方案1】：

您需要将imports: [ TranslateModule ] 放入声明BookingComponent 的任何模块中。app 模块中的导入仅使管道可用于在该模块中声明的组件。但是提供者/服务是从模块全局注册的（与组件、指令和管道不同）

【参考方案2】：

对于遇到此问题的人，以下是解决问题所需的简单步骤

在 app.module.ts 中包含翻译模块逻辑以及翻译加载器和 translateFactory

    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]`

【讨论】：

文档仅建议在使用 SharedModule 时必须导出 TranslateModule。没有提到必须添加到根模块（即 AppModule）的导出中。虽然添加到导出让 translate 管道为我工作。 ngx-translate 文档中的参考：github.com/ngx-translate/core#1-import-the-translatemodule

导出模块允许在共享以外的其他模块中使用管道；相反，将模块导入共享允许使用它，它是管道在共享模块中。

不需要导出 TranslateModule。它仅用于从该模块共享的组件。仅导入有效。在 angular11 项目 #2021 中测试

【参考方案3】：

我只在一个“页面”上遇到过这个问题。如果包含翻译管道的组件的声明丢失，它也将找不到它。

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 

【参考方案4】：

翻译模块：将翻译器用作管道（在模板上）

import  TranslateModule  from '@ngx-translate/core';

imports: [
CommonModule,
RouterModule, //Router Module
TranslateModule //Translate Module**

]

【参考方案5】：

我正在使用 Ionic 5。我在 home.page.html 中的 HTML

<h2 > 'HOME.title' | translate </h2>

我有错误

找不到管道“翻译”

在 Visual Studio Code 中标记为红色错误。但无论如何，Ionic App 都在使用 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