[javascript] Angular 2에서 클릭 이벤트에 대한 함수 호출
컴포넌트 (typescript) 내부에서 함수를 선언하고 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()
메서드 (구성 요소 코드에서 선언 됨 )로 보냅니다 .
항목 만 표시하고 이벤트에서 정보를 얻을 필요가없는 경우 다음 (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- 간단한 예가 있습니다.
답변
읽어 컨트롤러 코드의 행, $scope.myFunc={
해야 $scope.myFunc = function() {
을function()
부분 것을 나타내는 것이 중요합니다. 그것은 함수입니다!
업데이트 된 컨트롤러 코드는 다음과 같습니다.
app.controller('myCtrl',['$scope',function($cope){
$scope.myFunc = function() {
console.log("function called");
};
}]);
답변
이것은 나를 위해 일했습니다 🙂
<button (click)="updatePendingApprovals(''+pendingApproval.personId, ''+pendingApproval.personId)">Approve</button>
updatePendingApprovals(planId: string, participantId: string) : void {
alert('PlanId:' + planId + ' ParticipantId:' + participantId);
}