Angular 11 ngx-translate 不适用于 app.component 以外的其他组件

Question

我正在尝试翻译我的应用程序以使其支持英语和西类牙语。 但它只翻译 app.component.html 中的内容。

如果我尝试在任何其他组件中翻译任何内容，我会收到错误消息 No pipe found with name 'translate'。

这是我的 app.module.ts:

...other imports
    import { HttpClientModule, HttpClient } from '@angular/common/http';
    import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
    import { TranslateHttpLoader } from '@ngx-translate/http-loader';

//import { WOW } from 'wow.js';

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

@NgModule({
  declarations: [
    AppComponent,
    SecureComponent,
    TopNavbarComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PublicModule,
    RouterModule,
    MDBBootstrapModule.forRoot(),
    NgwWowModule,
    ChartsModule,
    NgxIbanModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 app-routing.module.ts 中我这样做:

@NgModule({
  imports: [RouterModule.forRoot(routes),
    TranslateModule
  ],
  exports: [RouterModule,
    TranslateModule]
})

这是我的 app.component.ts:

import { Component, OnInit } from '@angular/core';
import { NgwWowService } from 'ngx-wow';
import {TranslateService} from '@ngx-translate/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  constructor(private wowService: NgwWowService, private translate: TranslateService) {
    this.wowService.init();
  // the lang to use, if the lang isn't available, it will use the current loader to get them
  translate.setDefaultLang('en');
  // for default language to be english, you need to use below code
  //translate.use('en');
  }

所以如果我在我的 app.component.html 中这样做:

<div>
  <h1>{{ 'home.title' | translate }}</h1>

  <!-- translation: translation pipe -->
  <p>{{ 'home.text' | translate }}</p>

  <!-- translation: directive (key as attribute)-->
  <p [translate]="'home.text'"></p>

  <!-- translation: directive (key as content of element) -->
  <p translate>home.text</p>
</div>

输出如下:

Translation demo
This is a simple demonstration app for ngx-translate

This is a simple demonstration app for ngx-translate

This is a simple demonstration app for ngx-translate

但是如果我将相同的 html 放在 home.component.html 中，我会得到错误:

Error: src/app/public/home/home.component.html:4:25 - error NG8004: No pipe found with name 'translate'.
    
    4   <h1>{{ 'home.title' | translate }}</h1>
                              ~~~~~~~~~
    
      src/app/public/home/home.component.ts:6:16
        6   templateUrl: './home.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component HomeComponent.

这是我的 home.component.ts:

import { Component, OnInit } from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private translate: TranslateService) { 
    
  }

  ngOnInit(): void {
  }

}

我不明白为什么它不起作用，因为 app.component 和 home.component 的所有相关导入都是相同的。 翻译文本在 assets/i18n/en.json 和 assets/i18n/es.json 中

Answer 1

您必须在使用翻译管道的组件所在的模块中导入 TranslateModule