Parameter decorator on a view-provider parameter of a class constructor that tells the DI framework to resolve the view by checking injectors of child elements, and stop when reaching the host element of the current component.
API
@Host {}
Usage Notes
The following shows use with the @Optional decorator, and allows for a null result.
class OtherService {}
class HostService {}
@Directive({
selector: 'child-directive',
standalone: false,
})
class ChildDirective {
logs: string[] = [];
constructor(@Optional() @Host() os: OtherService, @Optional() @Host() hs: HostService) {
// os is null: true
this.logs.push(`os is null: ${os === null}`);
// hs is an instance of HostService: true
this.logs.push(`hs is an instance of HostService: ${hs instanceof HostService}`);
}
}
@Component({
selector: 'parent-cmp',
viewProviders: [HostService],
template: '<child-directive></child-directive>',
standalone: false,
})
class ParentCmp {}
@Component({
selector: 'app',
viewProviders: [OtherService],
template: '<parent-cmp></parent-cmp>',
standalone: false,
})
class App {}
For an extended example, see "Dependency Injection Guide".