ng içeriğine nasıl erişirim?

Question

Sadece içerik öğeleri saymakla başlamak için ng-content içeriğine erişmek istiyorum, ancak daha sonra awesomeness ile. Örneğin

:

@Component({ 
selector: 'my-container', 
template: ` 
    <div class="my-container"> 
     <div class="my-container-nav"><a class="my-container-previous"></a></div> 
     <div class="my-container-body"> 
      <div class="my-container-items"> 
       <ng-content></ng-content> 
      </div> 
     </div> 
     <div class="my-container-nav"><a class="my-container-next"></a></div> 
    </div> 
` 
}) 
export class MyContainer implements AfterContentInit { 
    @ContentChildren(???) containerItems : QueryList<???>; 
    ngAfterContentInit() { 
     console.log('after content init: ' + this.containerItems.length); 
    } 
} 

ben içerik çocuklar için türü olarak neler var?

Her şey olabilirler. ElementRef'i denedim, ama bu işe yaramadı ve her zaman sıfır sayımı verdi. Kullanım

Örnek: ': 4 içerik init sonra' görmeyi beklediğiniz

<my-container> 
    <div>some content here</div> 
    <another-component [title]="'another component there'"></another-component> 
    <div>there's lots of content everywhere</div> 
    <span>no assumptions would be fair</span> 
</my-container> 

.

Answer 1

@ContentChildren'i yanlış anlamışım. Tüm içeriği temsil etmiyor. Ng içeriğinde @Components'ı temsil eder. yine ben vaktinden kendi türlerini bilmiyorsanız ben ng-içerik içinde @Components kazanmak nasıl belli değil

:

doğrudan soruya cevap vermek. Ama şimdi anladım ki bu biraz saçma bir şeydi: eğer ne olduğunu bilmiyorum, tam olarak ben onlarla ne yapacağımı düşünüyorum?

i bir elementRef olarak bu @ViewChild yoluyla ng-içerik ve referans ebeveyn içine bir şablon değişkenini (#items) tanıtabilirsiniz ng-tüm içerik içeriğine erişmek için:

dolaylı soruya cevap vermek için . Benzer karışıklığı bakan Diğerleri için

@Component({ 
selector: 'my-container', 
template: ` 
    <div class="my-container"> 
     <div class="my-container-nav"><a class="my-container-previous"></a></div> 
     <div class="my-container-body"> 
      <div #items class="my-container-items"> 
       <ng-content></ng-content> 
      </div> 
     </div> 
     <div class="my-container-nav"><a class="my-container-next"></a></div> 
    </div> 
` 
}) 
export class MyContainer implements OnInit { 
    @ViewChild('items') items: ElementRef; 
    ngOnInit() { 
     console.log('count is: ' + this.items.nativeElement.children.length); 
    } 
} 

i biraz daha @ContentChildren üzerinde genişletebilirsiniz: Sonra çocuk bu şekilde sayılabilir. i 2 @Components var ki: Bileşen a ve komponent-b ve i tüketici benim bileşenin içeriğinin içinde bu yerleştirir biliyoruz: my-bileşeninde Sonra

<my-component> 
    <component-a></component-a> 
    <div>random html</div> 
    <component-b></component-b> 
    <component-a></component-a> 
</my-component> 

i tüm örneklerini başvurular edinebilirler bireysel bileşen tipleri:

export class MyContainer implements AfterContentInit { 
    @ContentChildren(ComponentA) componentAInstances: QueryList<ComponentA>; 
    @ContentChildren(ComponentB) componentBInstances: QueryList<ComponentB>; 
    ngAfterContentInit() { 
     console.log('count of component A: ' + this.componentAInstances.length); 
     console.log('count of component B: ' + this.componentBInstances.length); 
    } 
} 

ve konsol gösterecektir 2 bileşenli A ve 1 B bileşeni olduğunu

Bu sürüm adayı olan işaret olmalıdır 4.