Вызов функции при событии щелчка в Angular 2

95

Как объявить функцию внутри компонента (машинописный текст) и вызвать ее при событии щелчка в Angular 2? Ниже приведен код той же функциональности в Angular 1, для которой мне нужен код Angular 2:

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

// контроллер

app.controller('myCtrl', ['$scope', function($cope) {
    $scope.myFunc= {
        console.log("function called");
    };
}]);
javascript angular typescript неизвестно
источник
5
Почему вы отметили, angular2если это Angular 1приложение?
BeetleJuice,
Скудное описание, структурно неправильные предложения, уродливый код. все это приводит к неправильному пониманию. люди, это вопрос Angular1!
Reyraa,
1
Что бы я ни написал в коде, я хочу сделать то же самое в angular2.
неизвестен
Старый пост, но я рекомендую посмотреть "tour of Heros" из документации angular 2.
Джефф
Это Angular 1 или Angular 2? Это должно было быть уточнено
Судхир Кошик

Ответы:

120

Код компонента:

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

Sebaferreras
источник
как насчет исчезновения этого меню после выхода из системы? моя страница databootstrapper с использованием такого меню и каждой другой страницы push имеет свои собственные, но после выхода из системы и перехода к странице входа в систему это меню неожиданно появилось, поэтому после щелчка исчезло, но icant справится с этим.
saber tabatabaee yazdi
@sabertabatabaeeyazdi, не могли бы вы создать демонстрацию Stackblitz со своей проблемой, чтобы я мог взглянуть на нее?
sebaferreras
57

Точный перевод в 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");
  }
}
Алиреза
источник
10

https://angular.io/guide/user-input - простой пример.

Засыпин Н.В.
источник
1
Ссылка на оригинальную документацию - лучший подход, так как это отличный шанс узнать больше.
Reyraa,
3

Строка в коде вашего контроллера, которая читает, $scope.myFunc={должна быть $scope.myFunc = function() {той function()частью, которую важно указать, это функция!

Обновленный код контроллера будет 

app.controller('myCtrl',['$scope',function($cope){
    $scope.myFunc = function() {
    console.log("function called");
  };
}]);
Нуман
источник
1

Это сработало для меня: :)

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

updatePendingApprovals(planId: string, participantId: string) : void {
  alert('PlanId:' + planId + '    ParticipantId:' + participantId);
}
Амрит Джайн
источник