Gọi một hàm trên sự kiện nhấp chuột trong Angular 2

Làm thế nào để khai báo một hàm bên trong một thành phần (typecript) và gọi nó trong một sự kiện nhấp chuột trong Angular 2? Sau đây là mã cho cùng một chức năng trong Angular 1 mà tôi yêu cầu mã Angular 2:

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

// bộ điều khiển

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

Mã thành phần:

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

}

Lượt xem:

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

Như bạn có thể thấy trong mã, tôi đang khai báo trình xử lý nhấp chuột như thế này (click)="open($event, item)"và gửi cả sự kiện và mục (được khai báo trong *ngFor) đến open()phương thức (được khai báo trong mã thành phần).

Nếu bạn chỉ muốn hiển thị mặt hàng và bạn không cần lấy thông tin từ sự kiện, bạn có thể thực hiện (click)="open(item)"và sửa đổi openphương pháp như thế nàypublic open(item) { ... }

Chuyển chính xác sang Angular2 + như sau:

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

cũng trong tệp thành phần của bạn:

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

https://angular.io/guide/user-input - có một ví dụ đơn giản.

Điểm mấu trong mã điều khiển của bạn, mà đọc $scope.myFunc={nên $scope.myFunc = function() {các function()phần quan trọng là phải chỉ ra, đó là một chức năng!

Mã bộ điều khiển được cập nhật sẽ là

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

Điều này đã làm việc cho tôi: :)

<button (click)="updatePendingApprovals(''+pendingApproval.personId, ''+pendingApproval.personId)">Approve</button>

updatePendingApprovals(planId: string, participantId: string) : void {
  alert('PlanId:' + planId + '    ParticipantId:' + participantId);
}