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

【问题标题】：call $emit event from angular to angularJS (publish-subscribe pattern)从 angular 到 angularJS 调用 $emit 事件（发布-订阅模式）
【发布时间】：2018-11-24 12:49:15
【问题描述】：

我有一个混合 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
        });

我的目标是只将控制器1迁移到角度5，维护控制器2的代码，保持订阅goToHomeEvent事件的能力。

有什么建议吗？

【问题讨论】：

编写一个服务，其方法是发出一个订阅它的事件。

标签： angularjs angular angular-hybrid

【解决方案1】：

我认为您可能会为此使用 localStorage，因为它们之间并没有真正进行通信。

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

【讨论】：

【解决方案2】：

我想出的解决方案是创建全局函数并将它们与窗口变量相关联，如下所示：

控制器1：

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

controller2（角度为 2+）：

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

【讨论】：

【解决方案3】：

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

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

app.$state 仅用于路由器问题。一旦你切换到 Angular2 的路由器，重新实现你在新路由器方面实际使用的 $state 部分。

app.$injector 在很多奇怪的情况下都很有用。

【讨论】：

【解决方案4】：

我已经通过全局函数解决了，没有发射/广播：

AngularJS：

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

Angular 7：

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

【讨论】：

【解决方案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) {}

【讨论】：