Angular2 - 获取组件轻量级DOM innerHTML /子节点

Question

假设我有一个组件:

@Component({
  selector: 'foo',
  template: '<div>foo</div>'
})
export class Foo {}

我在另一个组件中使用它:

<foo>
  <h1>some inner HTML</h1>
</foo>

我怎样才能知道Foolight DOM中是否有任何子元素？

我想要了解<h1>some inner HTML</h1>.

选项1 - @ContentChildren():这不能用于查询任意元素; 目前只能#foo以这种方式查询Angular 2组件或变量().如果我可以避免,我不想将变量附加到内部元素.

选项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>

我需要一些方法来设置hasTemplate,以true是否有内部HTML <foo>..</foo>标记.

Answer 1

• 您可以切换到encapsulation: ViewEncapsulation.Native，然后内容将位于 light DOM 中

• 您可以添加一个包装元素，<div #wrapper><ng-content><ng-content><div>然后您可以从“shadow DOM”获取元素