@Host() 没有在 <ng-content> Angular2 中不起作用

Question

我试图通过使用 @Host将依赖关系的搜索限制在其主机上。

，但是没有ng-content或发tranclusion。

以下代码不起作用(没有ng-content(

// Root Component
    @Component({
      selector: 'my-app',
      template: '<parent></parent>'
    })
    export class RootComponent { }

    @Component({
    selector: 'parent',
    template: '<child></child>',
    providers:[{provide:TestService,useClass:TestService}]
   })
   export class ParentComponent {
    name: string = '';
    constructor(abc:TestService){
        abc.name='SomeName';
        this.name=abc.name
       }
    }
    @Component({
    selector: 'child',
    template: '<h1>{{parent}}</h1>'
    })
         export class ChildComponent {
    parent: string = ""
    constructor(@Host() testService: TestService) {
        this.parent= 'My parent is :'+testService.name;
      }
    }

with ng-content 现在，仅通过更改RootComponent中的模板＆amp;ParentComponent上述代码开始工作

 @Component({
      selector: 'my-app',
      template: '<parent><child></child></parent>'
    })
    export class RootComponent { }
 @Component({
    selector: 'parent',
    template: '<ng-content></ng-content>',
    providers:[{provide:TestService,useClass:TestService}]
   })
   export class ParentComponent {
    name: string = '';
    constructor(abc:TestService){
        abc.name='SomeName';
        this.name=abc.name
       }
    }
    @Component({
    selector: 'child',
    template: '<h1>{{parent}}</h1>'
    })
         export class ChildComponent {
    parent: string = ""
    constructor(@Host() testService: TestService) {
        this.parent= 'My parent is :'+testService.name;
      }
    }

问题：

1. 为什么第一个代码不起作用(没有ng-content(..？
2. @host只能与ng-content一起使用..？
3. 在两种情况下，ng content的差异是汇编HTML的结构相同的。

这是可以参考的Plunker：

不工作

Answer 1

看起来您需要使用viewProviders而不是providers与@Host一起工作，如@Host

中所示

plunker示例