在离子3中调用函数

Question

我的问题似乎很容易，但我有点无法掌握它。

在我的家里我有一个功能，我想在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>

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

Answer 1

onclick是绑定到元素的click事件的语法。这类似于做button.addEventListener('click', () => window.goToSlide())之类的事情。当然，在goToSlide（全球）上不存在window所以你得到一个错误。

相反，您需要使用Angular的模板绑定语法。 ()语法用于输出绑定 - 即组件（在本例中为<button>）发出click事件时，它将运行绑定到它的内容。所以你使用语法(click)="goToSlide()"。在引擎盖下这是这样的：

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

所以现在它最终调用你定义的goToSlide函数而不是窗口上的函数。

Answer 2

请务必访问文档页面：

https://ionicframework.com/docs/api/components/button/Button/

你的home.html应该是这样的：

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