Как добавить сервис AngularJS в компонент Angular 5? - PullRequest
Новая
       39

Как добавить сервис AngularJS в компонент Angular 5?

0 голосов
/ 17 мая 2018

Я перевожу проект AngularJS в Angular 5, используя ngUpgrade, но у меня возникает проблема при попытке внедрить службу AngularJS в один из моих новых компонентов.

Я следовал Руководство по обновлению Angular и создало serviceProvider, который использует $injector (см. Код ниже), но я продолжаю получать эту ошибку:

core.js: 1449 Ошибка: Uncaught (в обещании): Ошибка: Попытка получить инжектор AngularJS до того, как он будет установлен.

Я подозреваю, что мне нужно использовать forwardRef где-нибудь, чтобы это исправить, но я не могу выяснить, как и где (ипочему).

Следуя примеру руководства по обновлению, я создал сервис-провайдер следующим образом:

ajs-upgradeded-provider.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 приложения:

app.module.ts: 

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

Я загружаю этот модуль с помощью ngUpgrade:

main.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']);
    });

Если я правильно понимаю, это должно позволить мнеo напрямую внедрить службу AngularJS в мой компонент следующим образом:

login.component.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 Ответ

0 голосов
/ 14 августа 2018

Вам необходимо добавить 

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);
    }
}
...