Angular 2 将复杂的服务注入到服务中

Question

I have three services and one component:

• root.service
• abstarct-child.service
• extend-child.service
• app.component

The root.service injects by using dependency injection the abstarct-child.service , like so:

import {Injectable} from 'angular2/core';
import {AbstractChildService} from './abstarct-child.service';

@Injectable()

export class RootService {
    constructor(private _abstractChildService: AbstractChildService) {}
    UseChildServiceDoSomethingFunction(){}  
}

The abstarct-child.service looks like so:

import {Injectable} from 'angular2/core';

@Injectable()
export abstract class AbstractChildService {
    abstract doSomething(): any ;
}

The extend-child.service looks like so:

import {Injectable} from 'angular2/core';
import {AbstractChildService} from './abstarct-child.service';

@Injectable()
export class ExtendChildService extends AbstractChildService{

    constructor(private _num: number) { super(); }
    doSomething() : any { return true; }
}

The app.component provides the root.service and the extend-child.service as the abstract-child.service like so:

import {Component} from 'angular2/core';
import {Input} from 'angular2/core';
import {provide} from 'angular2/core';
import {RootService} from './root.service';
import {AbstractChildService} from './abstarct-child.service';
import {ExtendChildService} from './extend-child.service';

@Component({
    selector: 'app',
    providers: [provide(AbstractChildService, { useClass: ExtendChildService, useValue: this.num})]
})
export class AppComponent {
    @Input('given_Num') num: number;
}

I would like to know how can I inject to the extend-child.service an object, in this case the this.num of app.component ?

Can anyone find what I'm doing wrong?

Thanks.

Answer 1

I haven't yet fully figured out what you try to accomplish but

   provide(AbstractChildService, { 
       useClass: ExtendChildService, 
       useValue: this.num})

is not a valid provider.

You can't have an useClass and useValue parameter in one provider, only one at a time.

You also can't use this. in a provider in a @Component() decorator. When the decorator is evaluated, there is not instance of the component yet where this. could refer to.

If you want to provide a number you can use a string or an OpaqueToken

provide('MyNumber', {useValue: 10}),

and get it injected by

constructor(@Inject('MyNumber') private _num: number) { super(); }

another way is to use a factory

provide(ExtendedChildService, {useFactory: () => { new ExtendedChildService(10)});

but this. still can't be referred.