填写这份《一分钟调查》,帮我们(开发组)做得更好!去填写Home

Host

A 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.

查看"说明"...

说明

For an extended example, see "Dependency Injection Guide".

选项

使用说明

The following shows use with the @Optional decorator, and allows for a null result.

class OtherService {} class HostService {} @Directive({selector: 'child-directive'}) 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>', }) class ParentCmp { } @Component({ selector: 'app', viewProviders: [OtherService], template: '<parent-cmp></parent-cmp>', }) class App { }
      
      
  1. class OtherService {}
  2. class HostService {}
  3.  
  4. @Directive({selector: 'child-directive'})
  5. class ChildDirective {
  6. logs: string[] = [];
  7.  
  8. constructor(@Optional() @Host() os: OtherService, @Optional() @Host() hs: HostService) {
  9. // os is null: true
  10. this.logs.push(`os is null: ${os === null}`);
  11. // hs is an instance of HostService: true
  12. this.logs.push(`hs is an instance of HostService: ${hs instanceof HostService}`);
  13. }
  14. }
  15.  
  16. @Component({
  17. selector: 'parent-cmp',
  18. viewProviders: [HostService],
  19. template: '<child-directive></child-directive>',
  20. })
  21. class ParentCmp {
  22. }
  23.  
  24. @Component({
  25. selector: 'app',
  26. viewProviders: [OtherService],
  27. template: '<parent-cmp></parent-cmp>',
  28. })
  29. class App {
  30. }