Вызвать функцию при событии click в Angular 2

Как объявить функцию внутри компонента и вызвать ее в событии клика. в angular 1

<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)" и отправляю как событие, так и элемент (объявленный в *ngFor) методу open() (объявленному в компоненте код).

Если вы просто хотите показать этот элемент, и вам не нужно получать информацию из этого события, вы можете просто сделать (click)="open(item)" и изменить метод open, подобный этому public open(item) { ... }

Ответ 2

точная передача на angular2 или 4 выглядит следующим образом:

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

Ответ 3

Перейдите в http://learnangular2.com/events/ - там есть простой пример.

Ответ 4

Строка в вашем коде контроллера, которая читает $scope.myFunc={, должна быть $scope.myFunc = function() {, часть function() важна для указания, это функция!

Обновленный код контроллера будет

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

Ответ 5

Это сработало для меня::)

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