0

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

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

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

然后，我有另一个控制器（我们称之为 controller2）订阅goToHomeEvent：

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

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

有什么建议么？

4

5 回答 5

3

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

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

于 2018-06-14T17:08:13.987 回答
1

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

控制器1：

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

控制器2（角度2+）：

window["goToHomeEvent"] = fuction(data) {
    //do stuff here
}
于 2018-06-18T15:58:01.847 回答
0

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

app.$q实际上是浏览器的本机/polyfillPromise.resolve和相关功能，因此 $q 的替换不需要注入到更新的代码中。

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

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

于 2018-06-18T16:08:37.783 回答
0

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

AngularJS：

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

角度 7：

public sendToAngularJS(params: Object)
  {
    window["bridgeFormAngular"](params);
  }
于 2019-01-29T17:24:32.623 回答
0

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

您必须遵循以下步骤：
1 - 将“$rootScope”服务注册为 Angular 中的提供者：

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

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

构造函数（@Inject（'$rootScope'）私有_rootScope：任何）{}

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

于 2019-02-09T11:15:32.930 回答