2016-11-18 13 views
2

나는 Angular 2 final 버전을 사용 중입니다. 저는 2라는 각도에서 검사기 서비스를 가지고 있습니다. HttpModule을 사용하는 비동기 유효성 검사를위한 정적 메서드를 작성하고 있습니다. 그래서이 컨텍스트에서 어떻게 주입하고 Http를 사용하여 백엔드에 전화를 걸 수 있습니다. 아래처럼 선언을 시도 : 정적 http : HTTP;앵귤러 2 최종 서비스에서 정적 방법으로 HTTP를 주입하거나 사용하는 방법은 무엇입니까?

그런 다음 ValidationService.http.get()과 같은 정적 메서드를 사용하려고 시도했습니다. 그런데 get-과 같은 오류가 발생했습니다. 정의되지 않았습니다.

누군가가이 문제에 약간의 빛을 낼 수 있습니까?

답변

1
@NgModule(...) 
class AppModule { 
    ngDoBootstrap(moduleRef) { 
    let injector = moduleRef.injector; 
    // assign injector somewhere to a static field 
    } 
} 

당신은 당신이 비록 정적 메서드를 피하려고한다

someStaticMethod() { 
    let validationService = someStatic.injector.get(ValidationService); 
} 

처럼 사용할 수 있습니다. Angular2s 아키텍처에 대한 것입니다.

+0

감사합니다, 그럼 내가 생각 : 당신의 OtherStaticClass 당신이 쓰기의 정적 메서드 어딘가에

@NgModule({ bootstrap: [ AppComponent ], // due this method ngDoBootstrap is never call so we will get injector in constructor. ... }) export class AppModule { constructor(public appRef: ApplicationRef, public appState: AppState, public injector: Injector) { SomeStaticClass.angularInjector = injector; } ... } 

그리고 나는 정적을 바꿔야한다. 나는 이것에 관해 더 많이 google해야한다라고 생각한다. – revathi

+0

솔루션에 대해 자세히 설명해 주시겠습니까? 유효성 검사 서비스에서도 비슷한 문제가 발생했으며 양식에 대한 유효성 검사를 만들기 위해이 자습서 [link] (https://coryrylan.com/blog/angular-form-builder-and-validation-management)를 수행했습니다. http를 서비스에 주입 할 때 정의되지 않습니다. 저는 정적 함수에 익숙하지 않은데 왜 그것이 작동하지 않는지 확실하지 않습니다. – PBandJen

+0

유효성 검사 서비스는 정적 방법과 어떤 관련이 있습니까? 성취하려는 것을 보여주는 코드를 추가하는 곳에 새로운 질문을 만드는 것이 더 나을 수도 있습니다. –

0

나는이 게시물 (http://www.adonespitogo.com/articles/angular-2-extending-http-provider/)을 확장하여 Http 클래스를 확장하고 Http의 싱글 톤을 반환하는 정적 메서드를 추가했습니다.

./services/http.service.ts

import { Injectable, ReflectiveInjector } from '@angular/core'; 
import { 
    BaseResponseOptions, 
    BaseRequestOptions, 
    BrowserXhr, 
    ConnectionBackend, 
    CookieXSRFStrategy, 
    Headers, 
    Http as HttpParent, 
    Request, 
    RequestOptions, 
    RequestOptionsArgs, 
    Response, 
    ResponseOptions, 
    XHRBackend, 
    XSRFStrategy 
} from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class CustomHttp extends HttpParent { 

    public static getInstance() { 
     if (!(this._instance instanceof CustomHttp)) { 
      this._instance = ReflectiveInjector.resolveAndCreate([ 
       CustomHttp, BrowserXhr, XHRBackend, 
       { provide: ConnectionBackend, useClass: XHRBackend }, 
       { provide: ResponseOptions, useClass: BaseResponseOptions }, 
       { provide: XSRFStrategy, useFactory:() => { 
         return new CookieXSRFStrategy(); 
        } 
       }, 
       { provide: RequestOptions, useClass: BaseRequestOptions } 
      ]).get(CustomHttp); 
     } 
     return this._instance; 
    } 

    private static _instance: CustomHttp; 
} 

./app.module.ts

import { NgModule } from '@angular/core'; 
import { HttpModule, RequestOptions, XHRBackend } from '@angular/http'; 
import { CustomHttp } from './services/http.service'; 

@NgModule({ 
    bootstrap: [ 
     AppComponent 
    ], 
    declarations: [ 
     AppComponent 
    ], 
    imports: [ 
     HttpModule 
    ], 
    providers: [ 
     { 
      provide: CustomHttp, 
      useFactory: (backend: XHRBackend, options: RequestOptions) => { 
       return new CustomHttp(backend, options); 
      }, 
      deps: [XHRBackend, RequestOptions] 
     }; 
    ] 
}) 
export class AppModule {} 

./services/validation.service.ts

import CustomHttp from './http.service'; 

export class ValidationService { 
    static public doSomething() { 
     CustomHttp.getInstance().get('some/api/').subscribe(
      (response) => { 
       console.log(response); 
      }) 
    } 
} 

나는 그것이 당신을 위해 일하기를 바랍니다.

0

나는 angular-starter 프레임 워크를 사용하고 난에 src/app/app.module.ts 파일에 인젝터에 액세스 할 수 있습니다 :

SomeStaticClass.angularInjector.get(ValidationService);