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

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）

ERROR 错误：找不到管道“翻译”！

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 可能会有所帮助。

Answer 3

这个方法对我有用：-

在 tsconfig.json 中添加 "angularCompilerOptions": { "enableIvy": false }