☰

Angular 2のクリックイベントで関数を呼び出す 質問する

tag-icon • tag-icon javascript angular typescript
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");
    };
}]);

ベストアンサー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)"を変更してください。openpublic open(item) { ... }

おすすめ記事