Question

如何在组件上侦听click事件并在组件上调用方法？

前 -

组件

if (number == 0) {
    $("#min").prop("disabled", true);
    $("#plus").click(function () {
     number = number + 1;
     document.getElementById('num').innerHTML = number;
    });
}

if (number > 0) {
    $("#min").prop("disabled", false);

    $("#plus").click(function () {
     number = number + 1;
     document.getElementById('ptn1').innerHTML = number;
    });

    $("#min").click(function () {
     number = number - 1;
     document.getElementById('ptn1').innerHTML = number;
    });
}

HTML -

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <div>Hello my name is {{name}}. </div>
   `
})
export class MyComponent {
  name = "Aj"
}

现在我如何收听点击组件本身？

Answer 1

在您的组件中使用HostListener。 Ploppy给出的答案有效，但Angular告诉您在组件中使用HostListener而不是像这样

import { HostListener  } from "@angular/core";

@Component({
  [...]
})
export class MyComponent {

  @HostListener("click") onClick(){
    console.log("User Click using Host Listener")
  }

}

Answer 2

使用host装饰器的@Component属性：

@Component({
  ...,
  host: { '(click)': 'onClick()'}
})

export class MyComponent {
  private onClick() {
    console.log('onClick');
  }
}

Answer 3

与使用（click）=“myFunction”语法在任何地方监控点击的方式相同。

详细信息可以在Angular文档中找到。 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

当您说“在组件本身上”时，如果您不希望父元素监听单击，那么只需将（单击）处理程序放在组件模板中而不是父标记中。在这种情况下，父母将不知道捕获的点击。

收听Angular组件上的click事件

3 个答案: