Rufen Sie eine Funktion für ein Klickereignis in Winkel 2 auf

91

Wie deklariere ich eine Funktion innerhalb einer Komponente (Typoskript) und rufe sie bei einem Klickereignis in Angular 2 auf? Es folgt der Code für dieselbe Funktionalität in Angular 1, für den ich Angular 2-Code benötige:

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

//Regler

app.controller('myCtrl', ['$scope', function($cope) {
    $scope.myFunc= {
        console.log("function called");
    };
}]);
javascript angular typescript Unbekannt
quelle
5
Warum hast du getaggt, angular2wenn dies eine Angular 1App ist?
BeetleJuice
Geringe Beschreibung, strukturell falsche Sätze, hässlicher Code. Das alles führt zu falschem Verständnis. Leute, das ist eine Angular1-Frage!
Reyraa
1
Was auch immer ich in Code geschrieben habe, ich möchte dasselbe in angle2 tun.
Unbekannt
Alter Beitrag, aber ich empfehle, die "Tour of Heros" aus der Angular 2-Dokumentation zu betrachten.
Jeff
Ist es Winkel 1 oder Winkel 2? Es sollte angegeben worden sein
Sudhir Kaushik

Antworten:

116

Komponentencode:

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

}

Aussicht:

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

Wie Sie im Code sehen können, deklariere ich den Klick-Handler wie folgt (click)="open($event, item)"und sende sowohl das Ereignis als auch das Element (deklariert in *ngFor) an die open()Methode (deklariert im Komponentencode).

Wenn Sie nur das Element anzeigen möchten und keine Informationen vom Ereignis erhalten müssen, können Sie (click)="open(item)"die openMethode einfach wie folgt ausführen und ändernpublic open(item) { ... }

sebaferreras
quelle
Wie wäre es, dieses Menü nach dem Abmelden zu verschwinden? Meine Databootstrapper-Seite, die ein Menü wie dieses verwendet, und jede andere Push-Seite hat ihre eigene, aber nach dem Abmelden und dem Aufrufen der Anmeldeseite wurde dieses Menü unerwartet angezeigt.
Säbel tabatabaee yazdi
@sabertabatabaeeyazdi Könnten Sie bitte eine Stackblitz-Demo mit Ihrem Problem erstellen, damit ich es mir ansehen kann?
sebaferreras
55

Die genaue Übertragung auf Angular2 + ist wie folgt:

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

auch in Ihrer Komponentendatei:

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

https://angular.io/guide/user-input - es gibt ein einfaches Beispiel.

Zasypin NV
quelle
1
Die Bezugnahme auf Originaldokumentationen ist ein besserer Ansatz, da dies eine große Chance darstellt, mehr zu lernen.
Reyraa
3

Die Zeile in Ihrem Controller-Code, die lautet, $scope.myFunc={sollte $scope.myFunc = function() {das function()Teil sein, ist wichtig, um anzuzeigen, dass es sich um eine Funktion handelt!

Der aktualisierte Controller-Code wäre 

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

Das hat bei mir funktioniert: :)

<button (click)="updatePendingApprovals(''+pendingApproval.personId, ''+pendingApproval.personId)">Approve</button>
updatePendingApprovals(planId: string, participantId: string) : void {
  alert('PlanId:' + planId + '    ParticipantId:' + participantId);
}
Amrit Jain
quelle