角度测试-->没有 TranslateStore 的提供者!

在使用 Angular 进行开发时，遇到没有 TranslateStore 的提供者的错误提示时，这表明你需要为你的应用程序提供一个可用的 Translation Service Provider。

什么是 Translation Service Provider？

Translation Service Provider 实际上是一个 Angular 服务，它用于管理文本翻译的工作。它提供了用于加载翻译文件，翻译文本的方法，并在整个应用程序中共享翻译数据。

如何为应用程序提供 Translation Service Provider？

我们可以使用 ngx-translate/core 库提供 TranslateService 服务。要开始使用此服务，我们首先需要安装该库。在命令行中运行以下命令：

npm install @ngx-translate/core

安装后，我们需要在我们的应用程序中引入 TranslateModule 模块，并将 TranslateService 服务提供给根组件。按照以下步骤进行设置：

1. 在 app.module.ts 文件中导入 TranslateModule 模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TranslateModule.forRoot() // 加载 TranslateModule 模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. 在 AppComponent 中导入并使用 TranslateService 服务：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en'); // 设置默认语言
  }
}

现在，我们已经为我们的应用程序提供了一个 Translation Service Provider，我们可以使用 TranslateService 服务管理我们的应用程序中的翻译文本。

如何在应用程序中使用 Translation Service？

使用 TranslateService 服务，我们可以通过以下方式实现翻译文本：

1. 在模板文件中使用 translate 指令：

<!-- 在模板中使用 'translate' 指令 -->
<h1>{{ 'HELLO' | translate }}</h1>

2. 在组件代码中使用 TranslateService 的 instant、get 和 set 方法：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private translate: TranslateService) {}

  ngOnInit() {
    console.log(this.translate.instant('HELLO'));
    this.translate.get('HELLO').subscribe((res: string) => {
      console.log(res);
    });
    this.translate.set('HELLO', 'Bonjour');
  }
}

使用此方法，我们可以轻松地完成文本翻译功能。

结论

在 Angular 应用程序中使用 Translation Service Provider 是非常简单和必要的，因为它帮助我们管理文本翻译任务，并避免了在应用程序的多个地方使用相同的文本造成耦合的问题。只需要如上述设置，就可以轻松地启用翻译服务。