web-dev-qa-db-ja.com

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

コンポーネント内で関数を宣言し（TypeScript）、Angular 2のclickイベントで呼び出す方法は？以下はAngular 2コードが必要なAngular 1の同じ機能のコードです。

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

//コントローラ

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

部品コード：

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)"を実行し、public open(item) { ... }のようにopenメソッドを変更します。

81
sebaferreras

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

https://angular.io/guide/user-input - 簡単な例があります。

9
Zasypin N.V.

$scope.myFunc={を読むコントローラコードの行は$scope.myFunc = function() {であるべきですfunction()部分は示すことが重要です、それは関数です！

更新されたコントローラコードは次のようになります。

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

これは私のために働いた：:)

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

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