代码之家  ›  专栏  ›  技术社区  ›  Stephan Muller

如何在Angular5组件中注入AngularJS服务?

  •  9
  • Stephan Muller  · 技术社区  · 8 年前

    我正在使用将AngularJS项目迁移到Angular5 ngUpgrade 但我在尝试将AngularJS服务注入我的一个新组件时遇到了一个问题。

    我跟着 Angular's upgrade guide 并创建了一个使用 $injector (请参阅下面的代码)但我一直遇到这个错误:

    果心js:1449错误:未捕获(承诺中):错误:试图在设置AngularJS喷油器之前获取它。

    我想我需要使用 forwardRef 有个地方可以解决这个问题,但我无法找到方法和地点(以及原因)。


    按照《升级指南》的示例,我创建了一个服务提供商,如下所示:

    ajs升级了供应商。ts:

    // The AngularJS service I want to use
    import { AuthenticationService } from '../ajs/services/authentication.service';
    
    export function authenticationServiceFactory($injector) {
        return $injector.get('authentication');
    }
    
    export const authenticationServiceProvider = {
        provide: AuthenticationService,
        useFactory: authenticationServiceFactory,
        deps: ['$injector']
    };
    

    然后我将其提供给应用程序的NgModule:

    应用程序。单元ts:

    @NgModule({
        declarations: [
            AppComponent
        ],
        imports: [
            BrowserModule,
            UpgradeModule,
        ],
        providers: [
            authenticationServiceProvider,
        ],
        bootstrap: [
            AppComponent,
        ],
    })
    export class AppModule {
    }
    

    我使用ngUpgrade引导该模块:

    主要的ts

    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { UpgradeModule } from '@angular/upgrade/static';
    import { AppModule } from './app/app.module';
    import { environment } from './environments/environment';
    
    // Import our AngularJS module
    import '../ajs/app';
    
    platformBrowserDynamic()
        .bootstrapModule(AppModule)
        .then(platformRef => {
            // Use the upgrade module to bootstrap the hybrid
            const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
            upgrade.bootstrap(document.documentElement, ['myAngularJSApp']);
        });
    

    如果我理解正确,这应该允许我直接将AngularJS服务注入到我的组件中,如下所示:

    登录。组成部分ts

    import { Component } from '@angular/core';
    
    import { AuthenticationService } from '../ajs/services/authentication.service';
    
    @Component({
        selector: 'my-login-page',
        templateUrl: './login-page.component.html'
    })
    export class LoginPageComponent {    
        constructor(private authenticationService: AuthenticationService) {
            console.log('authentication', authenticationService);
        }
    }
    

    我能做些什么来进一步简化这件事吗?我试着尽可能地遵循升级指南,为什么这不起作用呢?

    1 回复  |  直到 8 年前
        1
  •  1
  •   Nickolay Poliakow    8 年前

    您需要添加

    providers: [AuthenticationService] 
    

    在组件声明中,如下所示:

    import { Component } from '@angular/core';
    
    import { AuthenticationService } from '../ajs/services/authentication.service';
    @Component({
        selector: 'my-login-page',
        templateUrl: './login-page.component.html',
        providers: [AuthenticationService] 
    })
    export class LoginPageComponent {    
        constructor(private authenticationService: AuthenticationService) {
            console.log('authentication', authenticationService);
        }
    }