Panggil fungsi pada event click di Angular 2

95

Bagaimana cara mendeklarasikan fungsi di dalam komponen (skrip ketikan) dan memanggilnya pada acara klik di Angular 2? Berikut adalah kode untuk fungsi yang sama di Angular 1 yang saya perlukan kode Angular 2:

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

// pengontrol

app.controller('myCtrl', ['$scope', function($cope) {
    $scope.myFunc= {
        console.log("function called");
    };
}]);
javascript angular typescript tidak diketahui
sumber
5
Mengapa Anda memberi tag angular2jika ini adalah Angular 1aplikasi?
BeetleJuice
Deskripsi sedikit, kalimat salah secara struktural, kode jelek. semua hasilnya adalah pemahaman yang salah. orang ini adalah pertanyaan Angular1!
Reyraa
1
Apa pun yang saya tulis dalam kode saya ingin melakukan yang sama di angular2.
tidak diketahui
Posting lama, tapi saya sarankan melihat "tur Pahlawan" dari dokumentasi sudut 2.
Jeff
Apakah itu Angular 1 atau Angular 2? Seharusnya sudah ditentukan
Sudhir Kaushik

Jawaban:

120

Kode komponen:

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

}

Melihat:

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

Seperti yang Anda lihat di kode, saya mendeklarasikan handler klik seperti ini (click)="open($event, item)"dan mengirimkan event dan item (dideklarasikan di *ngFor) ke open()metode (dideklarasikan di kode komponen).

Jika Anda hanya ingin menampilkan item dan Anda tidak perlu mendapatkan info dari acara tersebut, Anda cukup melakukan (click)="open(item)"dan memodifikasi openmetode seperti inipublic open(item) { ... }

sebaferreras
sumber
Bagaimana kalau menghilangkan menu ini setelah logoff? databootstrapperpage saya menggunakan menu seperti ini dan setiap halaman push lainnya memiliki halaman mereka sendiri tetapi setelah logoff dan halaman login goto menu ini tidak terduga muncul sehingga setelah klik menghilang tetapi saya harus menangani ini.
saber tabatabaee yazdi
@sabertabatabaeeyazdi dapatkah Anda membuat demo Stackblitz dengan masalah Anda sehingga saya dapat melihatnya?
sebaferreras
57

Transfer yang tepat ke Angular2 + adalah sebagai berikut:

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

juga di file komponen Anda:

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

https://angular.io/guide/user-input - ada contoh sederhana.

Zasypin NV
sumber
1
Mengacu pada dokumentasi asli adalah pendekatan yang lebih baik karena merupakan peluang besar untuk belajar lebih banyak.
Reyraa
3

Baris dalam kode controller, yang berbunyi $scope.myFunc={harus $scope.myFunc = function() {yangfunction() bagian penting untuk menunjukkan, itu adalah fungsi!

Kode pengontrol yang diperbarui adalah 

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

Ini berhasil untuk saya: :)

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

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