分散的AngularJS組件之間的通信

Question

我們在應用程序中具有不具有父/子或同級關系的各種組件。 假設有一個復選框，當處於選中狀態時，該復選框應更改處於完全不同的容器中的另一個組件的狀態。

該應用程序有500多個不同的視圖，因此每個視圖都沒有一個控制器。 這些交互也是完全自定義的，因此我們將需要數十種方法來涵蓋所有交互（復選框到選項卡，多個復選框到選項卡，多個復選框到更多復選框等）。

最好的做法是什么？ 到目前為止，我們考慮了一種全球可用的服務，該服務可以通過id注冊組件，然后訂閱從屬組件以偵聽該服務中該特定id的狀態更改（例如，使用ng-if指令進行切換），或使用Redux。 我們以前沒有類似復雜關系的經驗。

任何想法或類似的經驗將不勝感激。

Answer 1

您所描述的Observer模式是通過帶有事件發射器（ $broadcast $emit ）的angularjs實現的，因此無需創建獨立的服務。

基於組件的應用程序的重點是要具有一些樹形結構。 因此，在這些情況下，子級組件會通知父級，然后父級可能會通知其他某個子級，然后繼續。

如果您的應用程序的結構不是這樣，則可以考慮進行重構，但是現在您可以綁定一些事件發射器。

Answer 2

要解決此問題，請使用允許松散耦合的體系結構的發布/訂閱模式 。

在AngularJS應用程序上，一個很棒的庫是postaljs ，可以輕松實現此模式：

在app.config定義一個$bus $ scope變量，該變量將在應用程序的所有位置上訪問：控制器，指令，...

app.config(function($provide) {
    $provide.decorator('$rootScope', [
        '$delegate',
        function($delegate) {
            Object.defineProperty($delegate.constructor.prototype,
                '$bus', {
                    get: function() {
                        var self = this;
                        return {
                            subscribe: function() {
                                var sub = postal.subscribe.apply(postal, arguments);
                                self.$on('$destroy',
                                    function() {
                                        sub.unsubscribe();
                                    });
                            },
                            channel: function() {
                                return postal.channel.apply(postal, arguments);
                            },
                            publish: function() { postal.publish.apply(postal, arguments); }
                        };
                    },
                    enumerable: false
                });
            return $delegate;
        }
    ]);
});

發布
發布已更新的項目。

var channel = $scope.$bus.channel('myresources');
channel.publish("item.updated", data);

在列表上發布更新

var channel = $scope.$bus.channel('myresources');
....
channel.publish("list.updated", list);

訂閱需要在“ myresources”通道上通知事件的控制器/指令。

 var channel = $scope.$bus.channel("myresources");
 ....
 //The wildcard * allow be notified on item/list. updated
 channel.subscribe("*.updated", function(data, envelopment) {
   doOnUpdated(); 
 });