Host

A constructor parameter decorator that tells the DI framework to retrieve a dependency from any injector until reaching the host element of the current component.

参见

选项

使用说明

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