Html 在ionic 3中调用函数

我的问题似乎很简单，但我有点搞不懂

在my home.ts中，我有一个函数，我想在my home.html中调用它

Home.ts

import { Component } from '@angular/core';
import { NavController, Slides } from 'ionic-angular';
import { ViewChild } from '@angular/core';

@Component({
  ...
})
export class HomePage {

  @ViewChild(Slides) slides: Slides;

  goToSlide() {
    this.slides.slideTo(1, 500);
  }   
}

Home.html

<button onclick="goToSlide()">Slide 1</button>

幻灯片1

---

我得到一个错误，我的函数“goToSlide（）”未知。知道问题是什么吗？

请务必访问文档页面：

您的home.html应该如下所示：

<!-- Bind the click event to a method -->
<button ion-button (click)="goToSlide()">
  Slide 1
</button>

幻灯片1

请务必访问文档页面：

您的home.html应该如下所示：

<!-- Bind the click event to a method -->
<button ion-button (click)="goToSlide()">
  Slide 1
</button>

幻灯片1

onclick

是绑定到元素的单击事件的语法。这类似于执行类似于

按钮.addEventListener（'click'，（）=>window.goToSlide（））

的操作。当然，

goToSlide

在

窗口（全局）上不存在，因此会出现错误

相反，您需要使用Angular的模板绑定语法<代码>（）

语法用于输出绑定——即当组件（

在本例中）发出单击事件时，它将运行绑定到它的内容。因此，您使用语法

（单击）=“goToSlide（）”

。在引擎盖下，这类似于：

this.content.querySelector('button').onClick(() => this.goToSlide())`.

---

因此，现在它最终调用定义的

goToSlide

函数，而不是窗口上的函数。

onclick

是绑定到元素的click事件的语法。这类似于执行类似于

按钮.addEventListener（'click'，（）=>window.goToSlide（））

的操作。当然，

goToSlide

在

窗口（全局）上不存在，因此会出现错误

相反，您需要使用Angular的模板绑定语法<代码>（）

语法用于输出绑定——即当组件（

在本例中）发出单击事件时，它将运行绑定到它的内容。因此，您使用语法

（单击）=“goToSlide（）”

。在引擎盖下，这类似于：

this.content.querySelector('button').onClick(() => this.goToSlide())`.

---

因此，现在它最终调用您定义的

goToSlide

函数，而不是窗口上的函数。

（单击）=“goToSlide（）”

，就是这样。谢谢。

（单击）=“goToSlide（）”

就是这样。谢谢