我试图通过使用将我的依赖项的搜索限制在它的主机上@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&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 供参考：