typescript – Angular2 – 获取组件轻量级DOM innerHTML /子节

@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>

如果< foo> ..< / foo>中有HTML,我需要一些方法将hasTemplate设置为true.标签.