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

在Angular中，可以使用ngx-translate库来实现多语言翻译，并将其应用于共享组件中。以下是一个示例步骤来实现这一点：

1. 首先，确保已经安装了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';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (http: HttpClient) => {
          return new TranslateHttpLoader(http, './assets/i18n/', '.json');
        },
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在shared组件中使用ngx-translate进行翻译。首先，导入TranslateService和使用它的相关方法：

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

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

4. 在组件中使用翻译服务进行翻译。可以在组件的构造函数中初始化翻译服务，并在需要翻译的地方使用`translateService.instant()`方法：

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

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

  constructor(private translateService: TranslateService) { 
    this.greeting = this.translateService.instant('GREETING');
    this.message = this.translateService.instant('MESSAGE');
  }
}

5. 最后，在应用的根组件或共享组件的父组件中使用`<app-shared-component></app-shared-component>`来引入共享组件。

确保在`./assets/i18n/`目录下创建对应的语言翻译文件，例如`en.json`和`zh.json`，并在这些文件中定义相应的键值对。

这样，你就可以在共享组件中使用ngx-translate库来实现多语言翻译了。