翻译模块角度10找不到管道“翻译”

问题描述

这是app.module.ts

import { NgModule } from '@angular/core';
import { browserModule } from '@angular/platform-browser';
import { HttpClient,HttpClientModule } from '@angular/common/http';
import { RouterModule,Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { TranslateLoader,TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import {CommonModule} from "@angular/common";

export function HttpLoaderFactory(httpClient: HttpClient) {
    return new TranslateHttpLoader(httpClient);
  }

@NgModule({
    declarations: [
        AppComponent
    ],imports: [
        browserModule,HttpClientModule,RouterModule.forRoot(appRoutes),CommonModule,TranslateModule.forRoot({
            loader: {
              provide: TranslateLoader,useFactory: HttpLoaderFactory,deps: [HttpClient]
            }
          })
    ],bootstrap: [
        AppComponent
    ]
})
export class AppModule {
}

这是toolbar.component.html，我在这里使用翻译。

<span>{{'shared.settings' | translate}}</span>

在toolbar.component.ts我导入的

import { TranslateService } from '@ngx-translate/core';

我不知道为什么，我遇到了这个错误（我使用的是Angular 10）

错误错误：找不到管道“ translate”！

解决方法

您必须在声明为TranslateModule的任何forRoot()中导入NgModule（而不是ToolbarComponent）。因此，例如，如果在其自己的模块中声明了它，则必须执行以下操作。否则，该组件将无法访问管道：

@NgModule({
  imports: [
    TranslateModule
  ],declarations: [
    ToolbarComponent
  ],exports: [
    ToolbarComponent
  ]
})
export class ToolbarModule {}

或者，如果您使用在多个其他功能模块中导入的SharedModule（通常的做法），则可以导出TranslateModule以确保不必在每个模块中都将其导入

@NgModule({
  exports: [
    CommonModule,TranslateModule
  ]
})
export class SharedModule {}

,

有时重新启动 IDE 可能会有所帮助。