Làm thế nào để mở rộng một thành phần với tiêm phụ thuộc trong Angular 2?

Question

Tôi có lớp sau ModuleWithHttp:

@Injectable() 
export default class { 
    constructor(private fetchApi: FetchApi) {} 
} 

và tôi muốn sử dụng nó như sau:

@Component({ 
    selector: 'main', 
    providers: [FetchApi] 
}) 
export default class extends ModuleWithHttp { 
    onInit() { 
    this.fetchApi.call(); 
    } 
} 

nên bằng cách mở rộng một lớp siêu mà đã tiêm một sự phụ thuộc tôi muốn có quyền truy cập vào nó ở trẻ em của nó.

Tôi đã thử nhiều cách khác nhau, thậm chí có siêu hạng như một thành phần:

@Component({ 
    providers: [FetchApi] 
}) 
export default class { 
    constructor(private fetchApi: FetchApi) {} 
} 

Nhưng vẫn còn, this.fetchApi là null, ngay cả trong siêu lớp.

Answer 1

Bạn cần phải tiêm fetchAPI trong lớp siêu và vượt qua nó đến các tầng lớp trẻ

export default class extends ModuleWithHttp { 

    constructor(fetchApi: FetchApi) { 
    super(fetchApi); 
    } 

    onInit() { 
    this.fetchApi.call(); 
    } 
} 

Đây là một tính năng của cách DI hoạt động nói chung. Lớp siêu sẽ khởi tạo con thông qua kế thừa, nhưng bạn phải cung cấp các tham số cần thiết cho con.

Answer 2

Nếu bạn muốn tránh điều này "tấm nồi hơi" mã dịch vụ trong các lớp con tiêm chỉ để tiêm trong constructor lớp cha và sau đó sử dụng hiệu quả các dịch vụ trong các lớp con thông qua thừa kế, bạn có thể làm điều này:

chỉnh sửa: từ góc 5.0.0 ReflectiveInjector đã phản đối ủng hộ StaticInjector, dưới đây được cập nhật mã để phản ánh sự thay đổi này

có một bản đồ dịch vụ với DEPS,

export const services: {[key: string]: {provide: any, deps: any[], useClass?: any}} = { 
    'FetchApi': { 
    provide: FetchApi, 
    deps: [] 
    } 
} 

Có một chủ Injector,

import {Injector} from "@angular/core"; 

export class ServiceLocator { 
    static injector: Injector; 
} 

set nó lên trong AppModule,

@NgModule(...) 
export class AppModule { 
    constructor() { 
    ServiceLocator.injector = Injector.create(
     Object.keys(services).map(key => ({ 
     provide: services[key].provide, 
     useClass: services[key].provide, 
     deps: services[key].deps 
     })) 
    ); 
    } 
} 

sử dụng các vòi phun trong lớp cha mẹ,

export class ParentClass { 

    protected fetchApi: FetchApi; 

    constructor() { 
    this.fetchApi = ServiceLocator.injector.get(FetchApi); 
    .... 
    } 
} 

và mở rộng tầng lớp phụ huynh, do đó bạn không cần tiêm dịch vụ FetchApi.

export class ChildClass extends ParentClass { 
    constructor() { 
    super(); 
    ... 
    } 

    onInit() { 
    this.fetchApi.call(); 
    } 
} 

Answer 3

Có thể đáp ứng muộn, nhưng tôi đã giải quyết chỉ tiêm bộ phun trên BaseComponent và trong tất cả các lớp con, theo cách đó tôi không cần duy trì bộ định vị dịch vụ.

cơ sở lớp của tôi:

constructor(private injectorObj: Injector) { 

    this.store = <Store<AppState>>this.injectorObj.get(Store); 
    this.apiService = this.injectorObj.get(JsonApiService); 
    this.dialogService = this.injectorObj.get(DialogService); 
    this.viewContainerRef = this.injectorObj.get(ViewContainerRef); 
    this.router = this.injectorObj.get(Router); 
    this.translate = this.injectorObj.get(TranslateService); 
    this.globalConstantsService = this.injectorObj.get(GlobalConstantsService); 
    this.dialog = this.injectorObj.get(MatDialog); 
    this.activatedRoute = this.injectorObj.get(ActivatedRoute); 
} 

My Lớp trẻ em:

constructor(private injector: Injector) { 

    super(injector); 

}