角2 Renderer2前儿童样行为

Question

如何使用角2‘Renderer2作为父级的第一个子级插入一个新的子级？

给定<div> <span>Foobar</span> </div>，我想在span之前插入一个元素，这样它就变成了<div> <span>New element</span> <span>Foobar</span> </div>。

问题是，我只能访问包含的div，并且无法弄清楚如何“预置”新元素(就像jQuery可以/将要做的那样)，或者找到父元素的第一个子元素，这样我就可以从呈现器中使用insertBefore。

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

用法就是这样；添加图标标记作为元素的第一个子元素的指令(如<button myIconDirective>Foobar</button> )应该成为<button myIconDirective><i class="icon-classes"></i>Foobar</button>。

下面是一个需要修改的柱塞，+'s当前位于文本的错误一侧:) http://plnkr.co/edit/mknH3yeTnFpepaIwmHUN

Answer 1

如果不使用本机节点firstChild子引用，似乎是不可能的：

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

和柱塞