TypeScript类中的工作注入如何进行？

Question

There is the following TypeScript class:

class RaceList {
    raceService: RaceService;
    races: Array<string>;

    constructor(raceService: RaceService) {
        // the interesting part is `: RaceService`
        this.raceService = raceService;
        this.raceService.list()
            .then(races => this.races = races);
      }
}

How does work this construction: this.raceService.list() if I dont have initialization of class like this: raceService = new RaceService() ?

Answer 1

To quote this tutorial:

"An Angular 2 service is simply a javascript function, along with its associated properties and methods, that can be included (via dependency injection) into Angular 2 components. They allow you to develop code for specific tasks that can be used in those components."

They do not require initialization when injected (it is done on its own), they have a single state and simply require to be injected in a given component.

Here's a better approach:

class RaceList {
    races: Array<string>;

    constructor(private raceService: RaceService) {          
        raceService.list()
            .then(races => this.races = races);
    }
}

As you can see you do not need to save the service's value in a class variable as it is set to private, it can be used in any method in RaceList by calling this.raceService .

Answer 2

This is a syntactic sugar of typescript, Instead of:

private raceService: RaceService;

constructor() {
    this.raceService = new RaceService;
}

You simply do this:

constructor(private raceService: RaceService) {}

Answer 3

Under the hood, Angular does the initialization and give you the initialized instance through your component's constructor.

If your service itself needs some others services in its constructor, Angular initializes this others services, provide them to your service constructor, and then provide your service to your component.