typescript - Angular2 - 获取组件轻型 DOM innerHTML/子节点

Question

假设我有一个组件:

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

然后我像这样在另一个组件中使用它:

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

我怎样才能知道 Foo light DOM 中有任何子元素吗？

我想得到 <h1>some inner HTML</h1> .

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

选项 2 - elementRef.nativeElement : 我可以注入(inject) ElementRef进入Foo组件，但是当组件实例化时(在构造函数中)，内部元素已经被移除，它将是空的。在生命周期的后期(例如 ngAfterViewInit() )，内部元素将只是影子 DOM(即 <div>foo</div> )。

我还缺少其他方法吗？

用例

为了说明我为什么要这样做，我正在创建一个库组件，它有一个默认模板，如果用户决定，可以用自定义模板替换它。所以我的默认模板是这样的:

<div *ngIf="hasTemplate"><ng-content></ng-content></div>
<div *ngIf="!hasTemplate"><!-- the default template --></div>

我需要一些方法来设置 hasTemplate至 true如果 <foo>..</foo> 中有 HTML标签。

Answer 1

• 你可以切换到encapsulation: ViewEncapsulation.Native然后内容将在轻型 DOM 中

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