Invoca uma função ao carregar em evento Angular 2
Como declarar uma função dentro de um componente (typescript) e chamá-la em um evento clique no Angular 2? Segue - se o código para a mesma funcionalidade no Angular 1 para o qual eu preciso de um código Angular 2:
<button ng-click="myFunc()"></button>
/ / controlador
app.controller('myCtrl', ['$scope', function($cope) {
$scope.myFunc= {
console.log("function called");
};
}]);
5 answers
Código do componente:
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);
}
}
Ver:
<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>
Como pode ver no código, estou a declarar o manipulador de click como este (click)="open($event, item)" e a enviar tanto o evento como o item (declarado no *ngFor) para o método open() (declarado no código do componente).
Se você só quiser mostrar o item e não precisar de obter informações do evento, você pode apenas fazer {[[5]} e modificar o método open como este public open(item) { ... }
A transferência exacta para Angular2+ é a seguinte:
<button (click)="myFunc()"></button>
Também no seu ficheiro de componentes:
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");
}
}
A linha no seu código de controlador, que lê $scope.myFunc={ deve ser $scope.myFunc = function() { a parte function() é importante para indicar, é uma função!
O código actualizado do controlador seria
app.controller('myCtrl',['$scope',function($cope){
$scope.myFunc = function() {
console.log("function called");
};
}]);
<button (click)="updatePendingApprovals(''+pendingApproval.personId, ''+pendingApproval.personId)">Approve</button>
updatePendingApprovals(planId: string, participantId: string) : void {
alert('PlanId:' + planId + ' ParticipantId:' + participantId);
}