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

【问题标题】：How to ng-click using TypeScript and ionicBootstrap?如何使用 TypeScript 和 ionicBootstrap 进行 ng-click？
【发布时间】：2017-08-07 22:29:46
【问题描述】：

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

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

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

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

我尝试在 ng-click 中使用 showPopup()，但显然缺少某些内容，我在文档中找不到任何相关信息。

ng-click="showPopup()"

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

【问题讨论】：

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案1】：

在您的 html 组件中，您希望它可点击，您需要使用(click)='showPopup()'。就像说：

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

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

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

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

【讨论】：

使用 ng-click 有什么变化？

【解决方案2】：

Ionic2 基于 Angular 2，使用点击事件 (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 方法 public open(item) { ... }

【讨论】：

啊，我对角度 1 感到困惑！谢谢！是否有可用变量的列表，例如模板的 $event？