在 Angular 2 中的单击事件时调用函数

javascript typescript angular

2022-08-30 05:16:12

如何在组件（typescript）中声明一个函数，并在Angular 2中的点击事件上调用它？以下是 Angular 1 中相同功能的代码，我需要 Angular 2 代码：

<button ng-click="myFunc()"></button>

控制器

app.controller('myCtrl', ['$scope', function($cope) {
    $scope.myFunc= {
        console.log("function called");
    };
}]);

答案 1

组件代码：

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

}

视图：

<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)"*ngForopen()

如果您只想显示项目，并且不需要从事件中获取信息，则可以像这样执行和修改方法(click)="open(item)"openpublic open(item) { ... }

答案 2

精确传输到Angular2 +如下：

<button (click)="myFunc()"></button>

也在组件文件中：

import { Component, OnInit } from "@angular/core";

@Component({
  templateUrl:"button.html" //this is the component which has the above button html
})

export class App implements OnInit{
  constructor(){}

  ngOnInit(){

  }

  myFunc(){
    console.log("function called");
  }
}