Een functie aanroepen bij klikgebeurtenis in Angular 2

Hoe declareer je een functie in een component (typescript) en roep je deze aan op een klikgebeurtenis in Angular 2?
Hieronder volgt de code voor dezelfde functionaliteit in Angular 1 waarvoor ik Angular 2-code nodig heb:

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

//controller

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

Antwoord 1, autoriteit 100%

Componentcode:

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

Bekijken:

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

Zoals je in de code kunt zien, verklaar ik de klikhandler als volgt (click)="open($event, item)"en stuur ik zowel de gebeurtenis als het item (gedeclareerd in de *ngFor) naar de open()methode (aangegeven in de componentcode).

Als je het item alleen wilt laten zien en geen informatie van het evenement nodig hebt, kun je gewoon (click)="open(item)"doen en de openmethode zoals deze public open(item) { ... }

Antwoord 2, autoriteit 46%

Exacte overdracht naar Angular2+is als volgt:

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

ook in uw componentbestand:

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

Antwoord 3, autoriteit 8%

https://angular.io/guide/user-input– er is een eenvoudige voorbeeld .

Antwoord 4, autoriteit 2%

De regel in uw controllercode, die $scope.myFunc={luidt, moet $scope.myFunc = function() {de function()deel is belangrijk om aan te geven, het is een functie!

De bijgewerkte controllercode zou zijn

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

Antwoord 5, autoriteit 2%

Dit werkte voor mij: 🙂

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

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