如何使用ngx-translate实现组件插值？

npm install @ngx-translate/core --save

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppComponent } from './app.component';

// HttpLoaderFactory函数用于加载翻译文件
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

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

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

@Component({
  selector: 'app-my-component',
  template: `
    <h1>{{ 'GREETING' | translate }}</h1>
    <p>{{ 'MESSAGE' | translate: { name: 'John' } }}</p>
  `
})
export class MyComponent {
  constructor(private translate: TranslateService) {}

  // 在组件初始化时设置默认语言
  ngOnInit() {
    this.translate.setDefaultLang('en');
  }
}

{
  "GREETING": "Hello!",
  "MESSAGE": "Welcome, {{ name }}!"
}

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

@Component({
  selector: 'app-root',
  template: `
    <app-my-component></app-my-component>
  `
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    // 加载翻译文件
    this.translate.use('en');
  }
}