Angular2 - 获取组件轻 DOM innerHTML / 子节点答案

【问题标题】：Angular2 - Get component light DOM innerHTML / child nodesAngular2 - 获取组件轻 DOM innerHTML / 子节点
【发布时间】：2016-02-29 18:19:36
【问题描述】：

假设我有一个组件：

@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：我可以将 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。

【问题讨论】：

标签： typescript angular

【解决方案1】：

你可以切换到encapsulation: ViewEncapsulation.Native，然后内容会在light DOM中
您可以在<div #wrapper><ng-content><ng-content><div> 周围添加一个包装器元素，然后您可以从“shadow DOM”中获取元素

【讨论】：

不使用ViewEncapsulation.Native意味着我仅限于实现shadow DOM的浏览器吗？我正在构建一个可重用的库，并且需要尽可能广泛的支持。除此之外 - 是的，它就像你说的那样工作。
是的，你需要在原生不支持它的浏览器上添加 web-components polyfills。包装器方法是否也有效？您可以在 Angular 存储库中创建一个功能请求，以添加对从 ng-content 元素查询内容子项的支持。
@Guenter - 好吧，恐怕第一个选项是不行的。无法使包装器方法起作用。我在问题中添加了更多信息以澄清我的用例。我想因为我的“自定义”模板包装器上有一个ngIf，所以当我尝试检查它的内容时，它只显示为，而ContentChildren('wrapper') 产生null。我认为角度/角度的问题可能是要走的路。
您需要使用ViewChild('wrapper') wrapper;，因为包装器位于<ng-content> 之外，然后是access the children with wrapper.nativeElement.children`（在ngAfterViewInit() 之内或之后）
非常好——只要我删除了ngIf，它就可以工作，<ng-content> 标签周围实际上不需要它。感谢您的帮助。