时间戳

首页 > 解决方案 > 将资产翻译文件嵌入到 Angular Web 组件中

angular - 将资产翻译文件嵌入到 Angular Web 组件中

问题描述

我正在尝试使用 Angular 创建一个 Web 组件。为了管理翻译，我使用 ngx-translate ( https://github.com/ngx-translate/core )。

这就是我加载转换文件的方式：

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}

这是一个简单的 .html 文件，其中包含了我的 Web 组件：

<!DOCTYPE html>
<html>
<head>
  <title>Example Website with Embedded Angular Web Component</title>
  <script src="https://mydomain.it/widget-calendar.js"></script>
  <link href="https://mydomain.it/widget-calendar.css" rel="stylesheet">
</head>
<body>
<optix-calendar api-key="apiKey"
                signup-title="Amazing newsletter!">
</optix-calendar>
</body>
</html>

我的 webcomponents 应该在多个站点中使用，因此在不同的域中。我想知道如何将我的翻译文件嵌入到我的网络组件中。我尝试使用绝对 url 来加载它们（否则 Angular 会在使用我的 Web 组件的用户的本地 pc 中寻找它们）但是我遇到了 CORS 的问题，我问自己这是否是正确的解决方案. 我一直在寻找有关它的文档，但我没有找到任何处理资产内容的最佳实践。在我的 Web 组件中嵌入资产翻译的最佳方法是什么？

标签： angularweb-component

解决方案

我遇到了同样的问题，并通过将翻译文件写入 .ts 而不是 .json 文件来解决它。然后将它们加载到服务中，该服务在主组件中启动。

本地化.服务.ts：

import { TranslateService } from '@ngx-translate/core';
import { Injectable } from '@angular/core';
import en from 'src/app/shared/i18n/en';
import es from 'src/app/shared/i18n/es';
import de from 'src/app/shared/i18n/de';

@Injectable({
  providedIn: 'root'
})
export class LocalizationService {

  constructor(private translate: TranslateService) {
    this.translate.setTranslation('de', de);
    this.translate.setTranslation('en', en);
    this.translate.setTranslation('es', es);

    this.translate.setDefaultLang('en');
  }

  use(language: string): void {
    this.translate.use(language);
  }
}

并且在主要成分中

app.component.ts：

import { Component, Input } from '@angular/core';
import { LocalizationService } from 'src/app/shared/localization.service';

@Component({
  selector: 'app-warehouse',
  template: '<span>{{"food.bestCookies" | translate}}</span>',
})
export class WarehouseComponent {
  @Input() language: string = 'en';

  constructor(localization: LocalizationService) {
    localization.use(this.language);
  }
}

实体

export default {
  food: {
    bestCookies: 'The perfect cookies'
  }
};

es.ts

export default {
  food: {
    bestCookies: 'Las galletas perfectas'
  }
};

de.ts

export default {
  food: {
    bestCookies: 'Die perfekten Kekse'
  }
};

灵感来自https://blog.kalvad.com/export-your-angular-component-as-a-web-component/

推荐阅读