如何使用$广播与组件

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

我想到了$广播，但是从我在这里发现的东西，它需要$范围和$ rootscope。这与使用组件的使用不兼容，因为我在应用中不再有$范围。

使用Angular组件时有干净的方法吗？

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

而是创建简单的服务，该服务允许您的组件使用可观察到的信息订阅消息。您可以使用RXJS创建这些可观察到的物品，也可以使用GOF主题/观察者模式自己滚动。

此服务将更新可观察到的Websocket获取特定消息。

更好，看看RXJS Websocket强加。

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

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>

正如克莱斯评论中所述，在保留组件模式的同时，只能使用$范围。您可以将组件的控制器和$广播，$ emit，$ on Contim of the It。

// parentController
controller: function ($scope) {
    $scope.$broadcast('someevent', someargs);
}
// childController
controller: function ($scope) {
    $scope.$on('someevent', function (event, args) {
        // function implementation...
    });

相关内容

最新更新

热门标签：