Angular2 - 获取分量光DOM的innerHTML /子节点

比方说，我有一个组件：Angular2 - 获取分量光DOM的innerHTML /子节点

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

我使用它的另一个组件是这样的：

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

我如何才能找到如果Foo在光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>

我需要一些方法来设置hasTemplate到true如果在<foo>..</foo>标签内的HTML。

来源

2016-02-28 Michael Bromley

您可以切换到encapsulation: ViewEncapsulation.Native则内容将在光DOM
您可以添加周围<div #wrapper><ng-content><ng-content><div>包装元素，那么你可以从“影子DOM”的元素

来源

2016-02-28 13:06:33

不使用'ViewEncapsulation.Native'是否意味着我仅限于实现阴影DOM的浏览器？我正在构建一个可重用的库，需要尽可能广泛的支持。除此之外 - 是的，它按照你的说法工作。 –

是的，您需要在本地不支持的浏览器上添加Web组件聚合填充。封装方法是否也可以工作？您可以在Angular repo中创建一个功能请求，以添加对来自'ng-content'元素的内容子查询的支持。 –

@Guenter - 好的，这使得第一个选项恐怕不行了。无法使包装方法工作。我添加了一些更多的信息来澄清我的用例。我认为，因为我在我的“自定义”模板包装器上有一个'ngIf'，所以当我尝试检查它的内容时，它就会显示为'<！ - template bindings = {} - >'ContentChildren（'wrapper' ）'产生'null'。我认为角度/角度上的问题可能是要走的路。 –

Angular2 - 获取分量光DOM的innerHTML /子节点

回答

相关问题