Angular 2 Renderer2 prependChild-like 行为

Question

如何使用 Angular 2' Renderer2 插入新子项作为父项的第一个子项？

给定<div> <span>Foobar</span> </div>我想在 span 之前插入一个元素所以它变成<div> <span>New element</span> <span>Foobar</span> </div> .

问题是我只能访问包含的 div，并且无法弄清楚如何“前置”新元素(就像 jQuery 可以/会做的那样)，或者找到父元素的第一个子元素，以便我可以使用insertBefore来自渲染器。

我尝试使用ContentChild获取第一个元素，但它给出 null ，我猜这是因为这一切都在指令中进行，而我不知道 native 元素的内容。

使用方法是这里将图标标签添加为元素的第一个子元素的指令，例如 <button myIconDirective>Foobar</button>应该变成<button myIconDirective><i class="icon-classes"></i>Foobar</button> .

这是一个需要修改的小工具，+ 目前位于文本的错误一侧:) http://plnkr.co/edit/mknH3yeTnFpepaIwmHUN

Answer 1

如果不使用 native 节点 firstChild 子引用，这似乎是不可能的:

ngAfterViewInit() {
    const newElement = this.renderer.createElement('i');
    this.renderer.insertBefore(this.el.nativeElement, newElement, this.el.nativeElement.firstChild); 
}

和the plunker