訪問不是組件或html標籤的組件標籤的內部文本？

Question

下面是一個例子：

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); 
    } 
}) 

然後我使用此代碼顯示的組件：

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

哪有ListOne的<item>標籤組件訪問的innerHTML的ngAfterContentInit？

我想要一個解決方案，而不用另一個標籤包裝內部文本。

Answer 1

這需要一點支持ItemComponent的：

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

對於我們設定descendants: true的@ContentChildren()：

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

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

Plunker example

我希望打字稿代碼仍然是有幫助的，我不知道如何使用Angular和ESx。