Question

我们说我有一个组件：

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

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

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

如何判断轻型DOM中Foo是否包含任何子元素？

我希望得到<h1>some inner 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>

如果hasTemplate标记内有HTML，我需要一些方法将true设置为<foo>..</foo>。

Answer 1

您可以切换到encapsulation: ViewEncapsulation.Native然后内容将在轻量级DOM中
您可以在<div #wrapper><ng-content><ng-content><div>周围添加包装元素，然后您可以从＆＃34; shadow DOM＆＃34;中获取元素。

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

1 个答案: