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

Question

我不确定 ng-click 在带有 Typescript 的 Ionic 2 中如何工作。

基本上，我的 Ionic 应用程序如下所示：

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

编辑：我也尝试在特定的 page.ts 文件中添加该函数，但它不起作用。

我尝试在 ng-click 中使用 showPopup()，但很明显，缺少了一些东西，我在文档中找不到任何关于它的信息。

ng-click="showPopup()"

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

Answer 1

Ionic2基于Angular2，点击事件(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)" 并像这样修改打开方法 public open(item) { ... }

Answer 2

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

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

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

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

此外，您还可以像往常一样传递参数。 (click)=showPopup(param1,param2,..).

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

How to ng-click using TypeScript and ionicBootstrap?

typescript

ionic-framework

ionic2

ionic3

angular