Question

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

我想到了$ broadcast，但是根据我发现的here，它需要$ scope和$ rootScope。这与组件的使用不兼容，因为我的应用程序中没有$ scope。

使用角度组件时是否有一种干净的方法？

Answer 1

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

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

此服务将更新WebSocket获取特定消息的可观察对象。

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

Answer 2

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

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>

Answer 3

正如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...
    });

如何使用$ broadcast与组件？

3 个答案: