Appel d'une fonction sur un événement de clic dans Angular 2

Question

Comment déclarer une fonction à l'intérieur d'un composant (typecript) et l'appeler sur un événement de clic dans Angular 2 ? Voici le code pour la même fonctionnalité en Angular 1 pour laquelle j'ai besoin du code d'Angular 2 :

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

//contrôleur

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

Answer 1

Code du composant :

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

}

Voir :

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

Comme vous pouvez le voir dans le code, je déclare le gestionnaire de clic comme ceci (click)="open($event, item)" et en envoyant à la fois l'événement et l'élément (déclarés dans le fichier *ngFor ) à la open() (déclarée dans le code du composant).

Si vous voulez juste montrer l'élément et que vous n'avez pas besoin d'obtenir des informations de l'événement, vous pouvez juste faire (click)="open(item)" et modifier le open comme ceci public open(item) { ... }

Answer 2

Transfert exact vers Angular2+ est le suivant :

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

également dans votre fichier de composants :

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

Answer 3

https://angular.io/guide/user-input - Il y a un exemple simple.

Answer 4

La ligne dans votre code de contrôleur, qui se lit $scope.myFunc={ devrait être $scope.myFunc = function() { le site function() Il est important d'indiquer que c'est une fonction !

Le code du contrôleur mis à jour serait le suivant

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

Answer 5

Cela a fonctionné pour moi : :)

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

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