एंगुलर 2 में क्लिक इवेंट पर एक फ़ंक्शन को कॉल करें

Question

किसी घटक (टाइपस्क्रिप्ट) के अंदर किसी फ़ंक्शन को कैसे घोषित किया जाए और इसे एंगुलर 2 में एक क्लिक इवेंट पर बुलाया जाए? निम्नलिखित एंगुलर 1 में समान कार्यक्षमता के लिए कोड है, जिसके लिए मुझे कोणीय 2 कोड की आवश्यकता है:

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

// नियंत्रक

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

Comments

angular2अगर यह एक Angular 1ऐप है तो आपने टैग क्यों किया ?

— बीटलजुइस 6

स्कैन विवरण, संरचनात्मक रूप से गलत वाक्य, बदसूरत कोड। गलत समझ में परिणाम के सभी। यह एक Angular1 सवाल है!

— रेयरा

कोड में जो कुछ भी मैंने लिखा है, मैं वही चाहता हूं जो कोणीय 2 में है।

— अनजान

पुरानी पोस्ट, लेकिन मैं कोणीय 2 प्रलेखन से "हेरोस के दौरे" को देखने की सलाह देता हूं।

— जेफ

क्या यह कोणीय १ या कोणीय २ है? इसे निर्दिष्ट किया जाना चाहिए

— सुधीर कौशिक

Answer 1

घटक कोड:

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

}

राय:

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

जैसा कि आप कोड में देख सकते हैं, मैं इस तरह से क्लिक हैंडलर घोषित कर रहा हूं (click)="open($event, item)"और ईवेंट और आइटम ( विधि में *ngFor) open()(घटक कोड में घोषित ) दोनों को भेज रहा हूं ।

यदि आप केवल आइटम दिखाना चाहते हैं और आपको घटना से जानकारी प्राप्त करने की आवश्यकता नहीं है, तो आप इस तरह (click)="open(item)"से openविधि को संशोधित और संशोधित कर सकते हैंpublic open(item) { ... }

Comments

लॉगऑफ़ के बाद इस मेनू को कैसे गायब करें? इस तरह से और हर दूसरे पुश पेज पर मेनू का उपयोग करके मेरा डेटाबूटस्ट्रैपरपेज है, लेकिन लॉगऑफ़ और गोटो लॉगिन पृष्ठ के बाद यह मेनू अप्रत्याशित रूप से प्रकट हुआ, इसलिए क्लिक गायब हो जाने के बाद भी इसे हटा दिया गया।

— कृपाण तबातबाई यज़्दी

@sabertabatabaeeyazdi क्या आप अपने मुद्दे के साथ एक स्टैकब्लिट्ज़ डेमो बना सकते हैं ताकि मैं इस पर एक नज़र डाल सकूं ?

— sebaferreras

Answer 2

Angular2 + का सटीक स्थानांतरण निम्नानुसार है:

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

आपके घटक फ़ाइल में भी:

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

Answer 3

https://angular.io/guide/user-input - इसका एक सरल उदाहरण है।

Comments

मूल दस्तावेज़ों का संदर्भ देना बेहतर तरीका है क्योंकि यह अधिक सीखने का एक अच्छा मौका है।

— रेयरा

Answer 4

आपके कंट्रोलर कोड में जो लाइन पढ़नी $scope.myFunc={चाहिए $scope.myFunc = function() {वह function()हिस्सा इंगित करने के लिए महत्वपूर्ण है, यह एक फ़ंक्शन है!

अद्यतन नियंत्रक कोड होगा

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

Answer 5

यह मेरे लिए काम किया: :)

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

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