Llamar a una función al hacer clic en el evento en Angular 2

95

¿Cómo declarar una función dentro de un componente (mecanografiado) y llamarla en un evento de clic en Angular 2? A continuación se muestra el código para la misma funcionalidad en Angular 1 para el que necesito el código Angular 2:

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

//controlador

app.controller('myCtrl', ['$scope', function($cope) {
    $scope.myFunc= {
        console.log("function called");
    };
}]);
javascript angular typescript desconocido
fuente
5
¿Por qué etiquetó angular2si se trata de una Angular 1aplicación?
BeetleJuice
Descripción escasa, oraciones estructuralmente incorrectas, código feo. todo el resultado en una comprensión incorrecta. gente, esta es una pregunta de Angular1!
Reyraa
1
Lo que sea que haya escrito en el código, quiero que haga lo mismo en angular2.
desconocido
Publicación antigua, pero recomiendo mirar el "tour de Heros" de la documentación de angular 2.
Jeff
¿Es Angular 1 o Angular 2? Debería haber sido especificado
Sudhir Kaushik

Respuestas:

120

Código de 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 puede ver en el código, declaro el controlador de clics de esta manera (click)="open($event, item)"y envío tanto el evento como el elemento (declarado en *ngFor) al open()método (declarado en el código del componente).

Si solo desea mostrar el elemento y no necesita obtener información del evento, puede hacerlo (click)="open(item)"y modificar el openmétodo de esta manerapublic open(item) { ... }

sebaferreras
fuente
¿Qué tal si desaparece este menú después de cerrar la sesión? mi databootstrapperpage que usa un menú como este y todas las demás páginas push tienen las suyas propias, pero después de cerrar sesión e ir a la página de inicio de sesión, este menú apareció inesperado, así que después de hacer clic desapareció, pero no puedo manejar esto.
saber tabatabaee yazdi
@sabertabatabaeeyazdi, ¿podría crear una demostración de Stackblitz con su problema para que pueda verlo?
sebaferreras
57

La transferencia exacta a Angular2 + es la siguiente:

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

también en su archivo de componente:

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

https://angular.io/guide/user-input : hay un ejemplo simple.

Zasypin NV
fuente
1
Hacer referencia a la documentación original es un mejor enfoque ya que hay una gran oportunidad de aprender más.
Reyraa
3

La línea en el código de su controlador, que $scope.myFunc={debe ser $scope.myFunc = function() {la function()parte que es importante indicar, ¡es una función!

El código del controlador actualizado sería 

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

Esto funcionó para mí :)

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

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