Question

我正在尝试使用@Host将我的依赖项搜索限制为仅限其主机。

但如果没有ng-content或翻译，它就无法运作。

以下代码无效（没有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;
      }
    }

使用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;
      }
    }

问题：

为什么第一个代码不起作用（没有ng-content）..？
@Host只适用于ng-content ..？
在两种情况下，ng-content与编译HTML的结构有什么不同。

以下是Plunker供参考：

Not working

Answer 1

您似乎需要使用viewProviders代替providers来使用@Host，如@Host

中所示

Plunker example

Angular2中没有<ng-content>的@Host（）无法正常工作

1 个答案: