假设我有一个组件：
@Component({
selector: 'foo',template: '<div>foo</div>'
})
export class Foo {}
我在另一个组件中使用它：
<foo> <h1>some inner HTML</h1> </foo>
我怎样才能知道Foo中是否有轻量级DOM中的子元素？
我想获得< h1>一些内部HTML< / h1>.
选项1 – @ContentChildren()：这不能用于查询任意元素;目前只能以这种方式查询Angular 2组件或变量(#foo).如果我可以避免,我不想将变量附加到内部元素.
选项2 – elementRef.nativeElement：我可以将ElementRef注入Foo组件,但是当组件实例化时(在构造函数中),内部元素已被删除,并且它将为空.在生命周期的后期(例如ngAfterViewInit()),内部元素将只是阴影DOM(即< div> foo< / div>).
我失踪的任何其他方法？
用例
为了给出我想要这样做的一些背景,我正在创建一个具有默认模板的库组件,如果用户决定,可以用自定义模板替换.所以我的默认模板如下所示：
<div *ngIf="hasTemplate"><ng-content></ng-content></div> <div *ngIf="!hasTemplate"><!-- the default template --></div>
