angular - TypeScript ve ionicBootstrap kullanarak ng-click nasıl yapılır?

Ionic 2'de Typescript ile ng-click'in nasıl çalıştığından emin değilim.

Temelde, benim Ionic uygulamam şöyle görünüyor:

class MyApp { 
 ...
 showPopup() { .. } 
 ...
}
ionicBootstrap(MyApp);

Düzenleme: Ayrıca specific-page.ts dosyasına fonksiyonu eklemeyi de denedim, ama işe yaramıyor.

ng-click içinde showPopup() kullanmaya çalışıyorum ama belli ki bir şey eksik ve belgelerde bununla ilgili herhangi bir bilgi bulamıyorum.

ng-click="showPopup()"

Benim neyi kaçırdığım hakkında herhangi bir fikrin var mı? Typescript olmadan $scope kullanılması gerektiğini biliyorum, ama Typescript ve IonicBootstrap ile ne olacak?

Cevap #1

Ionic2, Angular 2 üzerine kuruludur ve tıklama olayını (belgeler) kullanmanın doğru yolu

// component code
import { Component } from "@angular/core";

@Component({
  templateUrl:"home.html"
})
export class HomePage {

  public items: Array<string>;

  constructor() {
    this.items = ["item1", "item2", "item3"]
  }

  public open(event, item) {
    alert('Open ' + item);
  }

}

Ve sonra sizin görüşünüzde

<!-- View -->
<ion-header>
  <ion-navbar primary>
    <ion-title>
      <span>My App</span>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
<ion-list>
    <ion-item *ngFor="let item of items" (click)="open($event, item)">
        {{ item }}
    </ion-item>
</ion-list>
</ion-content>

Kodda görebileceğiniz gibi tıklama işleyicisini şu şekilde tanımlıyorum (click)="open($event, item)" ve hem event'i hem de öğeyi (*ngFor içinde tanımlanan) open() metoduna (component kodunda tanımlı) gönderiyorum.

Eğer etkinlikten bilgi almanız gerekmiyorsa, sadece (click)="open(item)" yapabilir ve open metodunu şu şekilde değiştirebilirsiniz: public open(item) { ... }

Cevap #2

Tıklanabilir olmasını istediğiniz HTML bileşeninizde, (click)='showPopup()' kullanmanız gerekir. Mesela şöyle diyelim:

<button (click)='showPopup()'>Click here</button>

TypeScript’inizde kod doğru:

class MyApp { 
 ...
 showPopup() { .. } 
 ...
}

Ayrıca parametreleri normalde geçirdiğiniz gibi geçirebilirsiniz. (click)=showPopup(param1,param2,..).

İlgili makaleler