如何使用TypeScript和ionicBootstrap进行ng-click

Question

我不确定ng-click在带有打字稿的 Ionic 2 中是如何工作的。

基本上，我的Ionic应用程序看起来像这样：

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

编辑：我还尝试在特定页面.ts文件中添加该功能，但它不起作用。

我尝试在ng-click中使用showPopup((，但显然缺少一些东西，并且在文档中找不到有关它的任何信息。

ng-click="showPopup()"

你知道我错过了什么吗？我知道没有 Typescript $scope必须使用，但是使用 Typescript 和 IonicBootstrap 呢？

Answer 1

Ionic2 基于 Angular 2，使用 click 事件 (docs( 的正确方法是

// 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);
  }
}

然后在你看来

<!-- 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>

正如您在代码中看到的，我像这样声明(click)="open($event, item)"单击处理程序，并将事件和项(在 *ngFor 中声明(发送到 open() 方法(在组件代码中声明(。

如果您不需要从事件中获取信息，则只需执行(click)="open(item)"并修改 open 方法，就像这个公共open(item) { ... }

Answer 2

在你的 html 组件中，你希望它是可点击的，你需要使用 (click)='showPopup()' .比如说：

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

在您的打字稿中，代码是正确的：

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

此外，您可以像通常传递的那样传递参数。 (click)=showPopup(param1,param2,..) .