如何用angular 9测试多语言_测试Angular中的key指令(9)_如何用setInterval防止Angular 9中的事件冒泡？ - 腾讯云开发者社区

如何用angular 9测试多语言

在 Angular 9 中测试多语言应用程序通常涉及以下几个步骤：

1. 设置 Angular 项目

确保你已经安装了最新版本的 Angular CLI。如果没有，可以使用以下命令安装：

npm install -g @angular/cli

然后创建一个新的 Angular 项目：

ng new my-app
cd my-app

2. 添加国际化支持

Angular 使用 @angular/localize 包来支持国际化。首先，安装必要的包：

ng add @angular/localize

这将自动配置你的项目以支持国际化，并添加必要的文件和配置。

3. 创建翻译文件

在 src/assets/i18n 目录下创建不同语言的翻译文件。例如，创建 en.json 和 fr.json 文件：

// src/assets/i18n/en.json
{
  "HELLO": "Hello"
}

// src/assets/i18param.json
{
  "HELLO": "Bonjour"
}

4. 在组件中使用翻译

在你的 Angular 组件中，使用 translate 管道来翻译文本：

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ 'HELLO' | translate }}</h1>
  `
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
    translate.use('en');
  }
}

5. 配置 `TranslateModule`

在你的 app.module.ts 文件中，配置 TranslateModule：

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

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

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

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

6. 编写测试

编写测试以验证多语言支持是否正常工作。在你的组件测试文件中，可以使用 TranslateService 来设置不同的语言并检查翻译是否正确。

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { TranslateService } from '@ngx-translate/core';

describe('AppComponent', () => {
  let component: AppComponent;
  let translateService: TranslateService;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        HttpClientModule,
        TranslateModule.forRoot()
      ],
      providers: [TranslateService]
    }).compileComponents();

    translateService = TestBed.inject(TranslateService);
  });

  beforeEach(() => {
    component = TestBed.createComponent(AppComponent).componentInstance;
  });

  it('should create the app', () => {
    expect(component).toBeTruthy();
  });

2));

  it('should display translated text', () => {
    translateService.use('en');
    const compiled = TestBed.createComponent(AppComponent).componentInstance;
    expect(compiled.nativeElement.querySelector('h1').textContent).toContain('Hello');

    translateService.use('fr');
    const compiledFr = TestBed.createComponent(AppControllecomponentInstance;
    expect(compiledFr.nativeElement.querySelector('h1').textContent).toContain('Bonjour');
  });
});