@Host() без <ng-content> в Angular2 не работает

Я пытаюсь ограничить поиск моих зависимостей только своим хостом, используя @Host,

Но это не работает без ng-content или включение.

Приведенный ниже код не работает (без ng-контента)

// 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 & 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-контента)..?
  2. @ Хост может работать только с нг-контентом..?
  3. В чем разница между ng-контентом и структурой скомпилированного HTML в обоих случаях.

Вот Plunker для справки:

Не работает

1 ответ

Похоже, вам нужно использовать viewProviders вместо providers работать с @Host как также показано в @Host

Пример плунжера

Другие вопросы по тегам