通过单击按钮从 HTML 调用 Angular2 组件函数答案

【问题标题】：Call Angular2 component function from HTML by clicking on a button通过单击按钮从 HTML 调用 Angular2 组件函数
【发布时间】：2017-05-19 00:47:50
【问题描述】：

我是 TypeScript 和 Angular2 的新手。当我想通过单击 HTML 中的按钮来调用组件函数时，我遇到了问题。

如果我在 HTML 按钮元素上使用 **onclick="locateHotelOnMap()"**，我会收到此错误：

ReferenceError：locateHotelOnMap 未定义在 HTMLButtonElement.onclick

有人可以帮我解决这个问题吗？在 Angular1 中，我使用指令 ng-click 调用了我的控制器功能。

我现在应该怎么做？

提前致谢。

【问题讨论】：

【解决方案1】：

你需要像这样调用函数 (click)="componentFunctionName()" 见下面的例子。

<button (click)="locateHotelOnMap()">Click Me!</button>

【讨论】：

【解决方案2】：

在 Angular 2 中，可以使用 () 围绕普通 javascript 处理程序调用事件，例如

<button (click)="locateHotelOnMap()">Hello World</button>

【讨论】：