It’s possible to use @ViewChild (also @ViewChildren and @ContentChild/Children) to query for components of different types using dependency injection.

In the example below we can use @ViewChildren(Base) to get instances of Foo and Bar.

abstract class Base {}

  selector: 'foo',
  providers: [{ provide: Base, useExisting: Foo }]
class Foo extends Base {}

  selector: 'bar',
  providers: [{ provide: Base, useExisting: Bar }]
class Bar extends Base {}

// Now we can require both types of components using Base.
@Component({ template: `<foo></foo><bar></bar>` })
class AppComponent {
  @ViewChildren(Base) components: QueryList<Base>;

继续阅读 30秒学会 Angular 片段 – Getting components of different types with ViewChild

For testing purposes you might want to inject window.location object in your component.
You can achieve this with custom InjectionToken mechanism provided by Angular.

export const LOCATION_TOKEN = new InjectionToken<Location>('Window location object');

  providers: [
    { provide: LOCATION_TOKEN, useValue: window.location }
export class SharedModule {}


export class AppComponent {
    @Inject(LOCATION_TOKEN) public location: Location
  ) {}

继续阅读 30秒学会 Angular 片段 – Window Location injection

Generally we get one service instance per the whole application.
It is also possible to create an instance of service per component or directive.

  selector: 'provide',
  template: '<ng-content></ng-content>',
  providers: [ Service ]
export class ProvideComponent {}
  selector: '[provide]',
  providers: [ Service ]
export class ProvideDirective {}

继续阅读 30秒学会 Angular 片段 – Component level providers