Wie verwende ich Renderer2, um ein Element als Kind zu erstellen?

Question

Angular: Content-Projektion von einem Attribut Richtlinie

Ich möchte ein neues Element in einer Komponente schaffen, ein Attribut-Direktive (für jetzt, ist es nennen wir: ‚insertEditButton‘):

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

ich habe bei Verwendung Renderer2 (https://angular.io/docs/ts/latest/api/core/index/Renderer2-class.html) gesucht, aber es ist in der Dokumentation nicht klar, wie createElement(name: string, namespace?: string) : any

ich war verwenden Hoffnung, jemand mich mit einem Beispiel zur Verfügung stellen kann, wie Renderer2 zu gebrauchen erstellen Elementmethode in einer attribute-Direktive. Oder welche anderen Lösungen kann ich berücksichtigen?

Answer 1

Beispiel:

Komponente 1:

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

Komponente 2:

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

Output:

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

Das hey ist im Selektor. Wenn Sie den Wähler wie folgt erklären:

selector: 'my-component1' 

Dann Sie diese Komponente wie folgt aus ‚Verwendung‘: <my-component1>, als tag.

Wenn Sie es wie folgt erklären:

selector: '[my-component1]' 

Dann Sie 'Verwendung' diese Komponente wie folgt aus: <tag my-component1>, als ein Tag des attribute.