如何在从 Angular 模块调用时注入 AngularJS 依赖项

Question

我正在尝试托管一个简单的混合应用程序（AngularJS + Angular 7）。我能够根据指南设置基本和引导两个模块。我能够建立从 AngularJS 到 Angular 的通信。

我遵循了在 Angular 模块 (https://angular.io/guide/upgrade) 中注入 AngularJS 服务的指南。但是，我发现我遇到的一些问题可能是我试图理解的基本设置。

这是真正的问题，当我尝试从 Angular 调用 AngularJS 服务时，它在运行时失败，说明注入 AngularJS 服务的依赖项未定义。例如：$http 没有定义。

我的问题是，我是否需要通过 Angular 模块中的提供者来注入这种依赖关系，我有一个提供者将服务本身注入到 Angular 模块中。任何有关指南或标准的帮助都会有所帮助。

这是我的 AngularJS 服务的格式。目前，我正在将其修改为类并尝试从 Angular 调用

function GetUsers( $http, OtherDependency) {

return {
  getUsers: getUsers
}

function getUsers(userID, key, phrase) {
//$http is used inside this method 
}

在 Angular 中，我通过提供者注入此服务并尝试通过其构造函数实例化来使用此服务

Answer 1

由于您的 stackbliz 演示无法运行，因此在我的项目中，我只需创建一个 Angular SharedModule 并将 angularjs 服务注入到提供程序，如下所示：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';


export function getToastrService($injector: any) {
    return $injector.get('toastr');
}

export function getLoadingService($injector: any) {
    return $injector.get('loadingService');
}

@NgModule({
    imports: [
        CommonModule
    ],
    exports: [
        NgxComponentsModule
    ],
    providers: [
        { provide: 'toastr', deps: ['$injector'], useFactory: getToastrService },
        { provide: 'loadingService', deps: ['$injector'], useFactory: getLoadingService }
    ]
})
export class NgxSharedModule { }

然后在我的Angular业务模块中，导入SharedModule，然后只需要在构造函数中使用DI即可：

constructor(@Inject('toastr') public toastr: any,
        private notifyService: NotifyService) { }

希望它对你有用。