Question

这是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”！

Answer 1

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

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

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

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

Answer 2

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

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

2 个答案: