Angular中使用ngx-translate动态传参实现链接文本翻译

嘿，这个需求ngx-translate完全能搞定，我帮你捋清楚怎么修改现有代码哈！

首先第一步，调整你的翻译语言文件（比如en.json、zh.json这类），把原来的"Hello"改成带占位符的格式，这样才能动态插入参数：

{
  "Hello": "Hello {{name}}"
}

这里的{{name}}是自定义的占位符，你也可以叫userNick或者其他名字，只要后面传递参数时保持一致就行。

接下来修改HTML模板，有两种常用的方式传递参数：

方式1：通过translate管道直接传参 #

你原来用的是管道语法，直接在管道后面加冒号跟上参数对象就可以。假设你的组件里有个变量（比如currentUserName），值是"XYZ"或"ABC"，代码改成这样：

<div class="parent">
  <a class="link">{{ MYCONSTANTS.HELLO | translate: {name: currentUserName} }}</a>
</div>

如果只是测试想写死参数，也可以直接传字符串：

<a class="link">{{ MYCONSTANTS.HELLO | translate: {name: 'ABC'} }}</a>

方式2：用translate属性绑定指令 #

如果你更喜欢属性绑定的写法（复杂场景下可读性更强），可以这么写：

<div class="parent">
  <a class="link" [translate]="MYCONSTANTS.HELLO" [translateParams]="{name: currentUserName}"></a>
</div>

要是需要多个参数也没问题，比如翻译文本是"Hello {{firstName}} {{lastName}}"，那参数对象就写成{firstName: 'Jane', lastName: 'Smith'}就行。

这样改完后，当currentUserName的值变化时，翻译后的文本会自动更新，完美实现你要的动态翻译效果！

内容的提问来源于stack exchange，提问作者user10828808