javascript - Kall en funksjon på klikkhendelse i Angular 2

Hvordan erklære en funksjon inne i en komponent (typescript) og kalle den ved et klikkhendelse i Angular 2? Følgende er koden for samme funksjonalitet i Angular 1 som jeg trenger Angular 2-kode for:

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

//kontroller

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

Svar #1

Komponentkode:

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

}

Vis :

<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>

Som du kan se i koden, erklærer jeg klikk-håndtereren slik (click)="open($event, item)" og sender både hendelsen og elementet (erklært i *ngFor) til open()-metoden (erklært i komponentkoden).

Hvis du bare vil vise elementet og du ikke trenger å hente informasjon fra hendelsen, kan du bare gjøre (click)="open(item)" og endre open-metoden slik: public open(item) { ... }

Svar #2

Eksakt overføring til Angular2+ er som følger:

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

også i komponentfilen din:

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

Svar #3

https://angular.io/guide/user-input - det er et enkelt eksempel.

Relaterte artikler