Angular中如何将TS变量拼接字符串后作为HTML内方法调用的参数

在Angular模板的事件绑定表达式中，你可以直接使用标准JavaScript字符串拼接语法，将固定字符串与组件变量组合后作为方法入参：

修改后的模板代码 #

<button (click)="testfunction('template' + testVariable)">CLICK</button>

上述代码执行时，传入testfunction的参数就是你预期的拼接结果templateTest。

注意事项 #

• 固定字符串需要用引号包裹，推荐使用单引号，避免和事件绑定外层的双引号产生语法冲突
• 模板中直接写变量名testVariable即可，不需要加this前缀，Angular会自动从当前组件实例中匹配对应的属性
• 也可以用ES6模板字符串实现相同效果，写法为：(click)="testfunction(template${testVariable})"

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