深入理解Angular中的依赖注入(4)

// parent.component.ts // ... @Component({ selector: 'parent', template: ` <h1>这里是父组件</h1> <ng-content></content> ` // 在父组件中注入 LoggerService providers: [LoggerService] }) constructor() {}

增加一个子组件：

// child.component.ts // ... @Component({ selector: 'child', template: ` <h1>这里是子组件</h1> ` }) constructor( @Host() @Optional() logger: LoggerService) ){}

当然<parent>标签中应该这样写:

<parent> <child></child> </parent>

因为此时宿主组件是父组件，所以我们在父组件中注入LoggerService  Angular注入器会自动向上查找，找到ParentComponet中的配置，从而完成注入。