0

我有一个使用组件的 Angular 1.x 应用程序，我希望能够在我的所有组件中广播消息。上下文如下：我有一个获取 websocket 消息的服务，我想将它们广播到我的所有组件控制器。

我想到了 $broadcast，但从我在这里找到的内容来看，它需要 $scope 和 $rootScope。这与组件的使用不兼容，因为我的应用程序中没有 $scope 了。

使用角度组件时是否有一种干净的方法可以做到这一点？

4

3 回答 3

0

我建议不要在这种情况下使用 $braudcast。

相反，创建简单的服务，允许您的组件使用 Observables 订阅消息。您可以使用 Rxjs 创建这些 Observable，也可以使用 GoF 主题/观察者模式创建自己的 Observable。

该服务将更新 WebSocket 获取特定消息的 observables。

更好的是，看看 Rxjs WebSocket 的实现。

于 2017-06-23T15:14:43.473 回答
0

创建广播服务可能是最干净的方式。除非组件位于单独的 Angular 应用程序模块中。这是一个基本的简单实现：

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope, BroadcastService) {
  this.broadcast = BroadcastService;
});
app.component("listenerComponent", {
  template: "<h2>Listener Component</h2><section>{{ $ctrl.message }}</section>",
  controller: function($scope, BroadcastService) {
    $scope.broadcast = BroadcastService;
    this.message = $scope.broadcast.message;
    $scope.$watch('broadcast.message', function(newVal) {
      this.message = newVal;
    }.bind(this))
  }
});

app.component("broadcastComponent", {
  template: '<h2>Broadcast Component</h2><form ng-submit="$ctrl.broadcast()"><input type="text" ng-model="$ctrl.newMessage"><button>Broadcast</button></section>',
  controller: function($scope, AppService) {
    this.newMessage = '';
    this.broadcast = function() {
      AppService.post(this.newMessage);
      this.newMessage = '';
    }
  }
});

app.factory("BroadcastService", function() {

  return {
    message: 'Default Message',
    post: function(message) {
      this.message = message;
    }
  }

})

app.factory("AppService", function(BroadcastService) {
  return {
    post: function(message) {
      BroadcastService.post("AppService Post Successful!!!" + message);
    }
  }

})
<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>Broadcast App</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl as vm">
    <h1>Broadcast Message:</h1> {{vm.broadcast.message }}

    
    <listener-component></listener-component>
    <broadcast-component></broadcast-component>
  </body>

</html>

于 2017-06-23T16:13:14.760 回答
0

正如 Claies 在评论中所述，完全可以在保留组件模式的同时仅使用 $scope。你可以像往常一样用它和 $broadcast、$emit、$on 注入组件的控制器。

// parentController
controller: function ($scope) {
    $scope.$broadcast('someevent', someargs);
}

// childController
controller: function ($scope) {
    $scope.$on('someevent', function (event, args) {
        // function implementation...
    });
于 2019-05-03T13:10:47.137 回答