Generally we get one service instance per the whole application.
It is also possible to create an instance of service per component or directive.
@Component({
selector: 'provide',
template: '<ng-content></ng-content>',
providers: [ Service ]
})
export class ProvideComponent {}@Directive({
selector: '[provide]',
providers: [ Service ]
})
export class ProvideDirective {}
file:app.component.ts
import { Injectable, Component, OnInit, OnDestroy, Host } from '@angular/core';
@Injectable()
export class ItemsLinker implements OnDestroy {
private links: Set<ItemComponent> = new Set();
link(item: ItemComponent) {
this.links.add(item);
}
unlink(item: ItemComponent) {
this.links.delete(item);
}
ngOnDestroy() {
this.links.clear();
}
}
@Component({
selector: 'item',
template: '<ng-content></ng-content>'
})
export class ItemComponent implements OnInit, OnDestroy {
constructor(@Host() private linker: ItemsLinker) {}
ngOnInit() {
this.linker.link(this);
}
ngOnDestroy() {
this.linker.unlink(this);
}
}
@Component({
selector: 'items',
template: '<ng-content></ng-content>',
providers: [ ItemsLinker ]
})
export class ItemsComponent {}
@Component({
selector: 'my-app',
template: `
<items>
<item>🦊</item>
<item>🦄</item>
<item>🐉</item>
</items>
`
})
export class AppComponent {}file:app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent, ItemsComponent, ItemComponent } from './app.component';
@NgModule({
imports: [BrowserModule],
declarations: [
AppComponent,
ItemsComponent,
ItemComponent
],
bootstrap: [AppComponent]
})
export class AppModule {}翻译自：https://www.30secondsofcode.org/angular/s/component-level-providers
