providers: 使用 multi 的情境

app.component.ts

import {Component, Injector} from '@angular/core';

import {serviceToken} from './app.module';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  service: any[];
  constructor(private injector: Injector) {
    this.service = <any[]>injector.get(serviceToken);
    this.callFunction('service2');
  }

  callFunction(kind: string) {
    const idx = this.service.findIndex(x => x.kind === kind);
    if (idx > -1) {
      console.log(this.service[idx].log());
    }
  }
}

app.module.ts

import {InjectionToken, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent} from './app.component';
import {Service1Service} from './service1.service';
import {Service2Service} from './service2.service';
import {Service3Service} from './service3.service';

export const serviceToken = new InjectionToken('serviceToken');

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    {provide: serviceToken, useClass: Service1Service, multi: true},
    {provide: serviceToken, useClass: Service2Service, multi: true},
    {provide: serviceToken, useClass: Service3Service, multi: true},
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

service1.service.ts

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

@Injectable()
export class Service1Service {
  kind = 'service1';
  constructor() {}

  log() {
    return 'service1';
  }
}

service2.service.ts

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

@Injectable()
export class Service2Service {
  kind = 'service2';
  constructor() {}
  log() {
    return 'service2';
  }
}

service3.service.ts

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

@Injectable()
export class Service3Service {
  kind = 'service3';
  constructor() {}
  log() {
    return 'service3';
  }
}