Wie bekomme ich ng-Inhalt vor dem Rendern in Angular2

Question

Ich muss den HTML-Code innerhalb einer Selektor-Tags einer Komponente geschrieben werden, wie es ist (vor dem Rendern in den Browser). Zum Beispiel davon ausgehen, meine Komponenten sind Eltern und Kind,

in Kind,

@Component({ 
    selector: 'child', 
    template: '<ng-content></ng-content>' 
}) 
... 

in Eltern,

@Component({ 
    selector: 'parent', 
    template: ` 
     <child> 
      <p>Title 1</p> 
      <some-other-component [input]="1"></some-other-component> 
     </child> 


     <child> 
      <p>Title 2</p> 
      <some-other-component [input]="2"></some-other-component> 
     </child> 
    ` 
}) 
... 

In der untergeordneten Komponente I den HTML-Code muß innerhalb von Tags als String geschrieben. in dem obigen Szenario brauche ich "<p>Title 1</p> <some-other-component [input]="1"></some-other-component>" und "<p>Title 2</p> <some-other-component [input]="2"></some-other-component>".

P.S. Mein Ziel ist es, eine Code-Snippet-Seite zu erstellen, auf der ich HTML-Code-Snippet als ng-content übergeben kann, der sowohl für die Vorschau als auch für das Codebeispiel verwendet wird.

Answer 1

Sie können Ihren Inhaltsteilen eindeutige Klassen hinzufügen und dann die nächste Komponentenkonfiguration auswählen. Selector hier ist ein gültiges querySelector fn Selektor

<ng-content select=".first"> 

und

<ng-content select=".second"> 

So Ihre Inhalte wie das sein können

<child class="fisrt"> 
     <p>Title 1</p> 
     <some-other-component [input]="1"></some-other-component> 
    </child> 


    <child class="second"> 
     <p>Title 2</p> 
     <some-other-component [input]="2"></some-other-component> 
    </child>