从 angular 调用 $emit 事件到 angularJS（发布-订阅模式）

Question

我有一个混合 angular 应用程序，它同时使用 angularJS 和 angular 5.

我正在将一个控制器从 angularJS 迁移到 angular 5. 这个控制器（我们称之为 controller1）有以下代码：

$rootScope.$emit('goToHomeEvent', 'Navigate to HomePage');

然后，我有另一个订阅 goToHomeEvent:

的控制器（我们称之为 controller2）

 $rootScope.$on('goToHomeEvent', function (event, data) {
            //Do some stuff
        });

我的目标是只将 controller1 迁移到 angular5，维护 controller2 的代码，保持订阅 goToHomeEvent 事件的能力。

有什么建议吗？

Answer 1

我认为您可以为此使用 localStorage，因为它们之间并没有真正的通信。

我建议您在发出时填充 localStorage 并在 controller2 中观看它。它可能会起作用，但我不知道它是否是解决您问题的最佳方法。

Answer 2

我提出的解决方案是创建全局函数并将它们关联到 window 变量，如下所示：

控制器 1：

$rootScope.$emit('goToHomeEvent', 'Navigate to HomePage');
window.goToHomeEvent(data);

controller2（在 angular 2+）：

window["goToHomeEvent"] = fuction(data) {
    //do stuff here
}

Answer 3

我们的解决方案是全局的变体。在调用 .module('app').run(fn) 的顶层 angularJS 文件中，我们注入 $rootScope、$q、$injector 和 $state 并将它们设置为一个全局变量 app （而不是直接在 window 对象上）。所以 Angular2+ 调用 app.$rootscope. 等。

app.$q 实际上是浏览器的 native/polyfilled Promise.resolve 和相关函数，因此不需要将 $q 的替换注入到较新的代码中。

app.$state 仅用于路由器问题。一旦您切换到 Angular2 的路由器，就新路由器而言，重新实现您实际使用的 $state 部分。

app.$injector 对于很多奇怪的情况很有用。

Answer 4

我已经通过没有emit/broadcast的全局函数解决了：

AngularJS:

$window.bridgeFormAngular = function (params)
  {
    console.log(params);
  }

Angular 7:

public sendToAngularJS(params: Object)
  {
    window["bridgeFormAngular"](params);
  }

Answer 5

您可以升级 angularjs 的 $rootscope 并在混合的 Angular 端使用它。

您将必须执行以下步骤：
1 - 将“$rootScope”服务注册为 Angular:

中的提供者

@NgModule({
  providers: [{
    provide: '$rootScope',
    useFactory: ($injector: any) => $injector.get('$rootScope'),
    deps: ['$injector']
  }]
})

2 - 通过注入在您的 Angular 组件或服务中使用 $rootScope：

构造函数(@Inject('$rootScope') private _rootScope: any) {}

constructor(@Inject('$rootScope') private _rootScope: any) {}

从 angular 调用 $emit 事件到 angularJS（发布-订阅模式）

call $emit event from angular to angularJS (publish-subscribe pattern)

angularjs

angular

angular-hybrid