Angular 中的模板字符串：如何绑定函数？答案

【问题标题】：Template Strings in Angular: How to bind a function?Angular 中的模板字符串：如何绑定函数？
【发布时间】：2019-01-20 09:48:32
【问题描述】：

我想知道是否可以通过模板字符串表示法将函数绑定到 html 模板。

如果我这样做

 let dynTamp = `<div> ${device.name} </div>`;

效果很好，但是这个

let dynTamp = `<button (click)="${someFunction}"></button>`;

不将函数绑定到点击事件。我在这里遗漏了什么吗？

背景：我正在使用 LeafletJs 并在地图上动态创建标记，其弹出框应包含按钮：

this.devices.forEach(device => {

        L.marker([Number(device.map_x), Number(device.map_y)], {icon: this.icon})
          .bindPopup(`<h2> ${device.name}</h2>
                  <button (click)="${doThis}"></button>
                  <button (click)="${doThat}"></button>`)
          .addTo(this.map)           
    }

【问题讨论】：

是的。角度表达式不是模板字符串。这是一个 Angular 表达式。单击按钮时调用 someFunction() 的语法是 (click)="someFunction()"。并且需要编译 Angular 模板。你不能只是动态地生成包含 Angular 标记的 HTML 并希望它能正常工作。不会的。
当然，我们从 AngularJS 知道这一点。在我的第一个示例中，虽然它确实被编译了，但这就是为什么我想知道函数是否也有这样的方法

标签： angular leaflet template-strings

【解决方案1】：

这应该是正确的语法：

let dynTamp = `<button (click)="someFunction()"></button>`;

我分享一个如何使用模板字符串的例子：View Example

【讨论】：

如果我这样做，点击时不会调用该函数
您在哪个生命周期中声明“dynMap”？？
我明白了，谢谢！不同之处在于，您将字符串用作常规 Angular 模板，而我动态创建模板并将其添加到 Dom - 在它编译后。这就是为什么这对你有用，但不幸的是对我来说不是。

【解决方案2】：

请换成这个

let dynTamp = `<button (click)="someFunction()"></button>`;

而不是

let dynTamp = `<button (click)="${someFunction}"></button>`;

角度表达式不是模板字符串。这是一个 Angular 表达式。单击按钮时调用 someFunction() 的语法是 (click)="someFunction()"。

【讨论】：