angular事件监听

在Angular中，可以使用$watch来实现事件监听。$watch是Angular自带的一个方法，它可以监听作用域中的变量，并在变量发生改变时执行相应的操作。[1]在Angular 7中，如果要监听组件内部的点击事件，可以简单地使用(click)事件绑定到组件，并传入一个函数即可。但是，如果要监听组件外部的点击事件，就需要实现一个可以复用的指令(directive)来实现。[2]在具体实现上，可以使用$scope.$watch来监听变量的变化，当被监听的变量发生改变时，$watch会执行相应的回调函数。[3]通过在回调函数中对变量进行操作，可以实现事件监听的功能。

相关问题

angular 全局监听键盘事件

要在 Angular 中全局监听键盘事件，你可以使用 HostListener 装饰器来实现。在你的根组件中，添加如下代码：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @HostListener('window:keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    console.log(event); // 在这里处理你的键盘事件
  }
}

在以上代码中，我们使用了 HostListener 装饰器来监听 `window` 对象的 `keydown` 事件。`$event` 参数是一个类型为 `KeyboardEvent` 的事件对象，你可以在 `onKeyDown` 方法中处理这个对象来实现你的业务逻辑。

angular监听事件

在Angular中，可以使用以下两种方法来监听事件：

1. 使用@Output装饰器和EventEmitter类来创建自定义事件。在子组件中，使用EventEmitter类来触发自定义事件，然后在父组件中使用@Output装饰器来监听该事件。

例如，在子组件中定义一个名为myEvent的自定义事件：

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'child-component',
  template: '<button (click)="onClick()">Click me!</button>'
})
export class ChildComponent {
  @Output() myEvent = new EventEmitter<string>();

  onClick() {
    this.myEvent.emit('Event triggered!');
  }
}

然后在父组件中监听该事件：

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

@Component({
  selector: 'parent-component',
  template: '<child-component (myEvent)="onMyEvent($event)"></child-component>'
})
export class ParentComponent {
  onMyEvent(event: string) {
    console.log(event);
  }
}

2. 使用RxJS中的Subject类来创建可观察对象，然后在组件中订阅该可观察对象以监听事件。

例如，在组件中定义一个名为mySubject的Subject对象：

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

@Component({
  selector: 'my-component',
  template: '<button (click)="onClick()">Click me!</button>'
})
export class MyComponent {
  mySubject = new Subject<string>();

  onClick() {
    this.mySubject.next('Event triggered!');
  }
}

然后在组件中订阅该可观察对象以监听事件：

import { Component } from '@angular/core';
import { MyComponent } from './my.component';

@Component({
  selector: 'app-root',
  template: '<my-component></my-component>'
})
export class AppComponent {
  constructor(private myComponent: MyComponent) {
    myComponent.mySubject.subscribe(event => console.log(event));
  }
}