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

在 Angular 中，可以使用 Angular 的国际化库 ngx-translate 来实现多语言支持，包括 translate 功能。要在 shared 组件中使用 translate，可以按照以下步骤操作：

1. 安装 ngx-translate：使用 npm 或者 yarn 安装 ngx-translate 库。

   npm install @ngx-translate/core @ngx-translate/http-loader

2. 在 AppModule 中导入 ngx-translate 相关模块并配置：

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

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

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

3. 创建一个共享的翻译服务（shared translation service）：

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

   @Injectable({
     providedIn: 'root'
   })
   export class SharedTranslationService {
     constructor(private translate: TranslateService) { }

     translateText(key: string): string {
       let translatedText = '';
       this.translate.get(key).subscribe((res: string) => {
         translatedText = res;
       });
       return translatedText;
     }
   }

4. 在 shared 组件中使用翻译服务：

   import { Component } from '@angular/core';
   import { SharedTranslationService } from './shared-translation.service';

   @Component({
     selector: 'app-shared-component',
     template: `
       <h1>{{ translatedText }}</h1>
     `
   })
   export class SharedComponent {
     translatedText: string;

     constructor(private sharedTranslationService: SharedTranslationService) { }

     ngOnInit() {
       this.translatedText = this.sharedTranslationService.translateText('hello');
     }
   }

通过以上步骤，你可以在 shared 组件中通过翻译服务来应用 translate 功能。在模板中，使用 `{{ translatedText }}` 就可以展示翻译后的文本。确保你在翻译文件中有对应的键值对，例如在英文语言文件 en.json 中有 "hello": "Hello"。这样，当你的应用切换到英文语言时，shared 组件中的文本就会显示为 "Hello"。