如何监听 AngularJS 组件中的事件？

Posted 2023-03-13

【中文标题】如何监听 AngularJS 组件中的事件？

【英文标题】：How to listen for an event in AngularJS component?

【发布时间】：2017-09-14 03:28:09

【问题描述】：

在 AngularJS 中我们可以广播和监听事件：

$rootScope.$emit('myEvent',$scope.data);

$rootScope.$on('myEvent', function(event, data) 

有没有办法监听组件内部的事件？

我想要实现的是对表单内重复的一组组件执行一些操作。 Ng-repeat 当然会迭代一些模型。模型中的一些数据绑定到组件。将函数绑定到组件很容易，组件可以执行一些逻辑，但是相反的方向似乎并不那么容易。

<div ng-repeat="someObject in mainModel.listOfObjects">
   <someControl ng-model="someObject.foo"></someControl>
   <custom-component ng-model="someObject.bar"></custom-component>
</div>
<someButton ng-click="executeActionOnAllCustomComponents()">

【问题讨论】：

也许这会有所帮助***.com/questions/19623412/…

【参考方案1】：

我认为你最好的选择是继续使用$emit() 和$broadcast() 发出的标准事件。 从 angualr 1.5 开始，引入了一些新的钩子和 sintax，但在组件内部，您始终可以注入 $rootScope 和 $scope，并像以前在 angular

模板：

<div ng-controller="parentController">
 <div ng-repeat="someObject in mainModel.listOfObjects">
   <someControl ng-model="someObject.foo"></someControl>
   <custom-component ng-model="someObject.bar"></custom-component>
 </div>
</div>

父控制器：

angular.controller('parentController', ['$scope', function($scope)
 ..
 if(somethingHappend)
   $scope.$broadcast('event.sample', ); //down in the scope chain
)

组件：

angular.component('customComponent', 
 bindings: 
  ngModel: '<' //one-way binding
 ,
 controller: MyCtrl

MyCtrl.$inject = ['$scope', '$rootScope'];

function MyCtrl('$scope', $rootScope)
 ..
 $scope.$on('event.sample', function(evt, data)
  //do your logic
 

如果您想检查模型的更改（从其他父范围进行，假设您的范围变量有单向绑定），另一种选择是使用每个摘要周期触发的钩子 $doCheck ，与旧手表机制相反，您必须保存旧值并将其与新值进行比较。

var self = this;
var oldModel = angular.copy(self.ngModel);
self.$doCheck = function()
 if(self.model !== oldModel)
   //do something
 

【讨论】：

很好的答案，grazie mille Karim！

【参考方案2】：

您可以将 $event 作为参数传递给函数

请看下面的代码。

<span ng-click=get($event)> click !!</span>

 $scope.get=function(ev)

alert(ev);
;

结果将是 [object MouseEvent]

【参考方案3】：

你可以使用 Angular 2+ 风格的 RxJS：

'use strict';

    import from, fromEventPattern from 'rxjs';
    import map, tap, switchMap, distinctUntilChanged from 'rxjs/operators';

    export default 
        bindings: ,
        controller: function (SomeService, $rootScope) 
            const self = this;

            self.$onInit = () => 
                fromEventPattern(
                    (handler) => $rootScope.$on('@some-event', handler)
                ).pipe(
                    distinctUntilChanged((x, y) => _.isEqual(x, y)),
                    switchMap(([e, data]) => from(SomeService.getSomething()))
                ).subscribe(
                    data => console.log(data),
                    error => console.log(error)
                );

            ;
        ,
        templateUrl: './some-component.html'
    

所以诀窍是使用fromEventPattern 从 AngularJS 事件监听器创建 Observable：

fromEventPattern(
   (handler) => $rootScope.$on('@some-event', handler)
)

【参考方案4】：

要在 AngularJs 中监听事件，请使用 ng-click 、 ng-change 等事件处理指令。这完全取决于您要捕获的事件类型。例如：

在你的组件 tmeplate 中添加下面的 html。

点击这里

在组件类中定义函数。

有关 AngularJS - 事件处理的更多详细信息，请查看链接：

https://www.tutespace.com/2018/11/angular-js-event-handling.html