Auf inneren Text von Komponenten-Tags zugreifen, der keine Komponente oder HTML-Tag ist?

Question

Hier ist ein Beispiel:

var ListItem = ng.core.Component({ 
    selector: "item", 
    inputs: ["title"], 
    template: "<li>{{title}} | <ng-content></ng-content></li>", 
}).Class({ 
    constructor: function(){} 
}) 

var ListOne = ng.core.Component({ 
    selector: "listone", 
    queries: { 
     list_items: new ng.core.ContentChildren(ListItem) 
    }, 
    directives: [ListItem], 
    template: "<ul><ng-content select='item'></ng-content></ul>" 
}).Class({ 
    constructor: function(){}, 
    ngAfterContentInit: function(){ 
     console.log(this.list_items); 
    } 
}) 

Und dann diesen Code verwende ich die Komponenten anzuzeigen:

<listone> 
    <item title="first">first</item> 
    <item title="second">second</item> 
</listone> 

Wie kann ngAfterContentInit von ListOne Komponente Zugang innerHTML- von <item>-Tags?

Ich möchte eine Lösung, ohne den inneren Text mit einem anderen Tag zu umhüllen.

Answer 1

Dies muss ein wenig Unterstützung der ItemComponent:

export class ItemComponent { 
    title: 'title'; 
    constructor(public elementRef:ElementRef){} 
} 

Für die @ContentChildren() wir descendants: true gesetzt:

export class ListoneComponent { 
    @ContentChildren(ItemComponent, {descendants: true}) list_items; 

    ngAfterContentInit() { 
    this.list_items.toArray().forEach((item) => { 
     console.log(item.elementRef.nativeElement.innerHTML); 
    }) 
    } 
} 

Plunker example

ich immer noch nützlich ist, ich hoffe, Typoskript Code Ich weiß nicht, wie man Angular mit ESx benutzt.