Angular 中的translate如何应用在shared组件中

在Angular中，可以使用ngx-translate库将翻译功能集成到应用程序中。要将翻译应用于共享组件，可以按照以下步骤操作：

1. 首先，在 app.module.ts 中导入 TranslateModule 和 TranslateLoader：

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

2. 然后，在 app.module.ts 中配置 TranslateModule：

@NgModule({
  imports: [
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (http: HttpClient) => {
          return new TranslateHttpLoader(http);
        },
        deps: [HttpClient]
      }
    })
  ],
  ...
})

3. 在共享组件中，导入 TranslateService：

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

4. 在构造函数中注入 TranslateService：

constructor(private translate: TranslateService) { }

5. 使用 TranslateService 的 get() 方法获取翻译文本：

this.translate.get('KEY').subscribe((res: string) => {
  console.log(res);
});

其中，'KEY' 是翻译文本在语言文件中的键。

6. 在 HTML 模板中使用翻译文本：

<p>{{ 'KEY' | translate }}</p>

这将自动将翻译文本应用于共享组件中的 HTML 模板。