如何使用Renderer2作为孩子创建元素？

Question

Angular：来自属性指令的内容预测

我想使用属性指令在组件内创建一个新元素（现在，让我们称之为：＆＃39; insertEditButton＆＃39;）：

<my-component insertEditButton></my-component>
<another-component insertEditButton></another-component>
<div insertEditButton></div>

我已经看过使用Renderer2（https://angular.io/docs/ts/latest/api/core/index/Renderer2-class.html），但在文档中不清楚如何使用 createElement(name: string, namespace?: string) : any

我希望有人可以提供一个如何在属性指令中使用Renderer2的createElement方法的示例。或者，我可以考虑哪些其他解决方案？

Answer 1

示例：

组件1：

@Component({
    selector: '[my-component1]',
    template: `
        <span>hello there</span>
    `
})
export class myComponent1 {}

组件2：

@Component({
    selector: 'my-component2',
    template: `
        <p my-component1></p>
    `
})
export class myComponent2 implements OnInit {}

输出：

<p><span>hello there</span></p>

嘿，在选择器中。当你像这样声明选择器时：

selector: 'my-component1'

然后你使用＆＃39;这个组件如下：<my-component1>，tag。

如果你这样声明：

selector: '[my-component1]'

然后你使用＆＃39;这个组件是这样的：<tag my-component1>，作为标签＆＃39; s attribute。