如何在 ngx-translate 中加载 yaml 文件而不是 json 文件？

Question

• 我们正在将 Angular 1.x 转换为 Angular
• 在版本 1 中，我们一直使用 yaml 文件进行本地化
• 在 Angular 最新版本中，我们有一个名为ngx-translate 的插件，用于这种多语言本地化
• 但它默认加载json文件来加载值
• 如何在 ngx-translate 中默认加载 yaml 文件，有什么方法可以做到这一点？

Answer 1

我知道有点晚了，但这个问题有一些看法。我通过谷歌搜索没有找到直接的解决方案，所以我发布了我的解决方案。

我是为 Angular 15 做的

因此，如果有人正在寻找解决方案，您可以这样做：

// https://www.npmjs.com/package/yaml
import { parse } from 'yaml';

...

class TranslateYamlHttpLoader implements TranslateLoader {
  constructor(
    private http: HttpClient,
    public path: string = '/assets/i18n/'
  ) {}

  public getTranslation(lang: string): Observable<Object> {
    return this.http
      .get(`${this.path}${lang}.yaml`, { responseType: 'text' })
      .pipe(map((data) => parse(data)));
  }
}

...

@NgModule({
    ...
    HttpClientModule,
    TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: (http: HttpClient) => new TranslateYamlHttpLoader(http),
        deps: [HttpClient],
      },
    }),
})
export class AppModule {}

创建翻译文件 src/assets/i18n/en.yaml

hello: Hello Angular
validation:
  required: Field is required

现在你可以像平常一样使用 ngx-translate 了：

<button>
  {{ 'hello' | translate }}
</button>

<div>
  {{ 'validation.required' | translate }}
</div>

这类似于https://github.com/ngx-translate/core/blob/master/projects/ngx-translate/http-loader/src/lib/http-loader.ts

我刚刚添加了yaml解析