带有两个不同链接的 Angular i18n

Question

我有一个实现i18n的Angular应用程序，用于根据客户的意愿选择语言。现在我想设置一个带有链接的页脚，该链接将根据语言重定向到不同的站点，例如 link1="https：//en.wikipedia.org/wiki/Angular_(web_framework(" 链接2="https://de.wikipedia.org/wiki/Angular" ，所以我将有一个别名，该别名将根据所选语言重定向到不同的站点。

我尝试使用角管，但我不知道如何设置。

<a href="'" class="footer__link">{{'footer.angular' | translate}}</a>

Answer 1

好的，所以我已经安装了ngx-translate到项目设置服务等。获得不同的值键取决于我在 Angular 中使用属性绑定的语言。来自 i18n .json 的角度抓取属性并设置我的变量。

footer.angular.link="https://en.wikipedia.org/wiki/Angular_(web_framework

和

<a [href]="'footer.angular.link' | translate" class="footer__link">{{'footer.angular' | translate}}</a>

这是非常简单的解决方案，但也许有人会有更好的解决方案。

Answer 2

我在尝试根据要翻译的区域设置语言提供不同的链接时遇到了同样的问题。

使其工作的解决方案如下：

1. 在component.ts文件中，将所有链接 URL 添加为变量：

   link1 = localize$`https://en.example-link1.com`;
   

2. 然后使用属性绑定将此变量添加到component.html文件中：

   <a [href]="link1"> my link </a>
   

3. 在翻译文件中，我使用 link1 获取源代码，只需在翻译页面时提供 link2 作为目标。

   <source>
   link1 = localize$`https://en.example-link1.com`;
   </source>
   <target>
   link2 = localize$`https://de.example-link2.com`;
   </target>