Appeler une fonction lors d’un événement de clic dans Angular 2

Comment déclarer une fonction dans un composant (texte typescript) et l’appeler lors d’un événement de clic dans Angular 2? Voici le code pour la même fonctionnalité dans Angular 1 pour lequel j’ai besoin du code Angular 2:

 

//manette

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

Code du composant:

 import { Component } from "@angular/core"; @Component({ templateUrl:"home.html" }) export class HomePage { public items: Array; constructor() { this.items = ["item1", "item2", "item3"] } public open(event, item) { alert('Open ' + item); } } 

Vue:

    My App       {{ item }}    

Comme vous pouvez le voir dans le code, je déclare le gestionnaire de clic comme ceci (click)="open($event, item)" et envoie l’événement et l’élément (déclaré dans le *ngFor ) à open() méthode (déclarée dans le code du composant).

Si vous voulez simplement afficher l’élément et que vous n’avez pas besoin d’obtenir des informations sur l’événement, vous pouvez simplement faire (click)="open(item)" et modifier la méthode open comme celle public open(item) { ... }

Le transfert exact à Angular2 + est comme ci-dessous:

  

également dans votre fichier de composant:

 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 – il y a un exemple simple.

La ligne dans votre code de contrôleur, qui lit $scope.myFunc={ devrait être $scope.myFunc = function() { la partie function() est importante à indiquer, c’est une fonction!

Le code de contrôleur mis à jour serait

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

Cela a fonctionné pour moi: 🙂

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