ionicで関数を呼び出す3

Question

私の問題は非常に簡単だと思われますが、私はちょっと気にしません。私home.tsで

私は私が私の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は、要素のクリックイベントに結合するための構文であります。これは、button.addEventListener('click',() => window.goToSlide())のようなものに似ています。もちろんgoToSlideはwindow（グローバルに）に存在しないため、エラーが発生します。

代わりに、Angularのテンプレートバインディング構文を使用する必要があります。 ()構文が出力バインディングに使用されます。つまり、コンポーネント（この場合は<button>）がクリックイベントを送出して、バインドされているものを実行します。したがって、構文(click)="goToSlide()"を使用します。

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

をだから今ではなく、ウィンドウ上の1のあなたの定義された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>