@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;
}
}
Вопросы:
- Почему первый код не работает (без ng-контента)..?
- @ Хост может работать только с нг-контентом..?
- В чем разница между ng-контентом и структурой скомпилированного HTML в обоих случаях.
Вот Plunker для справки:
1 ответ
Похоже, вам нужно использовать viewProviders
вместо providers
работать с @Host
как также показано в @Host