コンポーネント (TypeScript) 内で関数を宣言し、Angular 2 のクリック イベントでそれを呼び出すにはどうすればよいでしょうか。以下は、Angular 2 コードを必要とする Angular 1 の同じ機能のコードです。
<button ng-click="myFunc()"></button>
//コントローラ
app.controller('myCtrl', ['$scope', function($cope) {
$scope.myFunc= {
console.log("function called");
};
}]);
ベストアンサー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) { ... }