在角度2中点击事件调用一个函数

如何声明一个组件内部的函数(打印脚本) ，并调用它的点击事件在角度2？ 下面是角度1中相同功能的代码，我需要角度2的代码:

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

//控制器

app.controller('myCtrl', ['$scope', function($cope) {
$scope.myFunc= {
console.log("function called");
};
}]);
545346 次浏览
小开
最佳答案

组件代码:

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) { ... }所示

小开

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

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

提交答案