Wywołanie funkcji dla zdarzenia kliknięcia w Angular 2

Question

Jak zadeklarować funkcję wewnątrz komponentu i wywołać ją w zdarzeniu kliknięcia. w kątowy 1

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

// kontroler

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

Answer 1

kod Składnik:

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

} 

Widok:

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

Jak widać w kodzie, I” m deklarowanie obsługi kliknięcia, np. t jego (click)="open($event, item)" i wysyła zarówno zdarzenie, jak i element (zadeklarowany w *ngFor) do metody open() (zadeklarowanej w kodzie komponentu).

Jeśli chcesz tylko pokazać pozycję i nie ma potrzeby, aby uzyskać informacje od przypadku, można po prostu zrobić (click)="open(item)" i zmodyfikować metodę open jak ten public open(item) { ... }

Answer 2

idź do http://learnangular2.com/events/ - jest prosty przykład .

Answer 3

Wiersz w kodzie sterownika, który brzmi: $scope.myFunc={ powinien być $scope.myFunc = function() { część function() jest ważna, aby wskazać, jest to funkcja!

Zaktualizowana kod kontrolera będzie

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

Answer 4

ten pracował dla mnie: :) ​​

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

updatePendingApprovals(planId: string, participantId: string) : void { 

     alert('PlanId:' + planId + ' ParticipantId:' + participantId); 
} 

Answer 5

Dokładne przenoszenie do Angular2 + jest jak poniżej:

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

również w pliku komponentu:

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