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

EN

...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 { }

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

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');
  }

<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

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.

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 {
  }

}