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

Posted 2023-03-13

【中文标题】通过单击按钮从 HTML 调用 Angular2 组件函数

【英文标题】：Call Angular2 component function from HTML by clicking on a button

【发布时间】：2017-05-19 00:47:50

【问题描述】：

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

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

ReferenceError：locateHotelOnMap 未定义 在 HTMLButtonElement.onclick

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

我现在应该怎么做？

提前致谢。

【问题讨论】：

阅读手册：angular.io/docs/ts/latest/guide/user-input.html

【参考方案1】：

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

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

【参考方案2】：

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

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

【讨论】：

谢谢阿里。欣赏它。问候，德扬