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

发布时间：2020-12-17 17:56:52 所属栏目：安全来源：网络整理

导读：我不确定ng-click如何在Ionic 2中使用Typescript. 基本上,我的Ionic应用程序看起来像这样： class MyApp { ... showPopup() { .. } ...}ionicBootstrap(MyApp); 编辑：我也尝试在specific-page.ts文件中添加该函数,但它不起作用. 我尝试在ng-click中使用show

我不确定ng-click如何在Ionic 2中使用Typescript.

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

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

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

我尝试在ng-click中使用showPopup()但显然缺少某些东西,我在文档中找不到任何关于它的信息.

ng-click="showPopup()"

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

解决方法

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处理程序(click)=“open($event,item)”并将事件和项目(在* ngFor中声明)发送到open()方法(在组件代码中声明).

如果您不需要从事件中获取信息,您可以执行(单击)=“打开(项目)”并修改open方法,例如public open(item){…}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!