추상 클래스 유형 스크립트에 종속성 주입(Angular2)

추상 클래스 유형 스크립트에 종속성 주입(Angular2)

저는 추상적인 수업(건설자가 없는 수업)이 있는데 다른 수업을 주입하고 싶습니다.

추상 클래스:

import { ErrorHandler } from '../../shared/services/errorHandler.service';
import { Inject } from '@angular/core';


export abstract class BaseApiComponent<T> {
    @Inject(ErrorHandler) errorHandler: ErrorHandler;

    this.errorHandler.test();
}

주입된 클래스:

import { Injectable } from '@angular/core';

@Injectable()
export class ErrorHandler  {
  constructor() { }


  public test() {
    console.log('Test');
  }

}

그리고 다음 오류가 있습니다.

ORIGINAL EXCEPTION: TypeError: Cannot read property 'test' of undefined

이걸 어떻게 고칠 수 있죠?

Angular 2 RC5부터는 DI가 더 단순해집니다.당신은 그 물건을 장식할 필요가 없습니다.@Injectable()대신 한 곳에서 DI에 대해 선언합니다. NgModule.

export class ErrorHandler {
    test() {
        console.log('ErrorHandler.test()');
    }
}

export abstract class BaseApiComponent<T> {
    // use protected property parameter in abstract class
    // for accessibility from descendants.
    constructor(protected errorHandler: ErrorHandler) {}

    someMethod() {
        this.errorHandler.test();
    }
}

export class ApiComponentImpl<T> extends BaseApiComponent<T> {
    // use @Inject decorator
    constructor(@Inject(ErrorHandler) errorHandler: ErrorHandler) {
        super(errorHandler);
    }
}

app.vmdk.ts:

// class declarations
@NgModule({
    providers: [
        ErrorHandler,
        ApiComponentImpl
    ]
})
export class AppModule{
}

// bootstrap the app
platformBrowserDynamic().bootstrapModule(AppModule);

OpaqueToken을 사용하여 모듈성을 개선하고 유형 종속성을 제거할 수 있습니다.

export const errorHandlerToken = new OpaqueToken('ErrorHandler');

모듈에서:

    providers: [
        // using OpaqueTokens you can change the provided value
        // to anything without changing consumer code 
        {provide: errorHandlerToken, useClass: ErrorHandler},

생성자:

    constructor(@Inject(errorHandlerToken) errorHandler: ErrorHandler) {

Angular DI는 생성자 주입만 지원하므로 생성자가 필요합니다.

추상 클래스는 인스턴스화할 수 없으므로 추상 클래스에 직접 주입할 수도 없습니다.

따라서 다음과 같이 해야 합니다.

export abstract class BaseApiComponent<T> {
    constructor(errorHandler: ErrorHandler) {}

    someMethod() {
     this.errorHandler.test();
    }
}

export class ApiComponentImpl<T> {
    constructor(errorHandler: ErrorHandler) {
      super(errorHandler);
    }

}

나는 각진 개발자는 아니지만, 예시를 보면.@Inject장식기는 항상 특성 장식기가 아닌 매개변수 장식기로 사용됩니다.

두 장식품의 종류가 달라서 문제가 생길 수도 있지만 잘 모르겠습니다.
시도:

export abstract class BaseApiComponent<T> {
    private errorHandler: ErrorHandler;

    protected constructor(@Inject(ErrorHandler) handler) {
        this.errorHandler = handler;
    }

    public error() {
        this.errorHandler.test();
    }
}

또한 당신이 실제로 언제 사용하는지 잘 모르겠습니다.this.errorHandler.test();그것이 교실에 그냥 있을 수 없기 때문에, 나는 그것을 교실로 옮겼습니다.error방법.

---

편집을

예. 확장 클래스에 주입한 다음 인스턴스를 부모에게 전달해야 합니다.

export abstract class BaseApiComponent<T> {
    protected errorHandler: ErrorHandler;

    protected constructor(handler: ErrorHandler) {
        this.errorHandler = handler;
    }
}

export class Restaurants extends BaseApiComponent<any> {
    constructor(@Inject(ErrorHandler) handler) {
        super(handler);
    }
}

언급URL : https://stackoverflow.com/questions/39224865/dependency-injection-into-abstract-class-typescriptangular2