Angular 2에서 클릭 시 이벤트를 호출합니다.

Angular 2에서 클릭 시 이벤트를 호출합니다.

컴포넌트(타이프스크립트) 내의 함수를 선언하고 Angular 2의 클릭 이벤트로 호출하려면 어떻게 해야 합니까?다음은 Angular 2 코드가 필요한 Angular 1의 동일한 기능에 대한 코드입니다.

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

//컨트롤러

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

컴포넌트 코드:

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()method(컴포넌트코드에 기재되어 있습니다.

이벤트 정보를 얻을 필요가 없고 아이템만 보여주고 싶다면(click)="open(item)"변경하다open이런 방법public open(item) { ... }

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

https://angular.io/guide/user-input - 간단한 예가 있습니다.

이것은 나에게 효과가 있었다:)

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

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

컨트롤러 코드의 행은 다음과 같습니다.$scope.myFunc={그래야 한다$scope.myFunc = function() {그function()부품은 기능임을 나타내는 것이 중요합니다.

업데이트된 컨트롤러 코드는 다음과 같습니다.

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

언급URL : https://stackoverflow.com/questions/40211730/call-a-function-on-click-event-in-angular-2