Angular2 - Get bileşeni ışık DOM innerHTML/çocuk düğümler

Question

ı bir bileşen var diyelim:

@Component({ 
    selector: 'foo', 
    template: '<div>foo</div>' 
}) 
export class Foo {} 

Ve böyle başka bileşende tüketmek:

<foo> 
    <h1>some inner HTML</h1> 
</foo> 

nasıl öğrenebilirim Foo, ışık DOM'de herhangi bir alt öğeye sahipse?

<h1>some inner HTML</h1> numaralı telefonu almak istiyorum.

Seçenek 1 - @ContentChildren(): Bu, rasgele öğeleri sorgulamak için kullanılamaz; Şu anda sadece Angular 2 bileşenleri veya değişkenleri (#foo) bu şekilde sorgulanabilir. Bunu önlemek için iç elemanlara bir değişken eklemek zorunda kalmak istemiyorum.

Seçenek 2-elementRef.nativeElement: I Foo bileşeni içine ElementRef enjekte edebilir, ancak parça (yapıcısında) örneği olan zaman, iç kısımların önceden kaldırılmış, ve boş olacaktır. Daha sonra yaşam döngüsünde (ör. ngAfterViewInit()) iç elemanlar sadece DOM (yani <div>foo</div>) olacaktır.

Eksik olduğum başka yöntemler var mı? Kullanım Örneği

ben bunu yapmak istiyorum neden bazı bağlamda vermek gerekirse, kullanıcı karar verirse, özel bir şablon tarafından değiştirilebilir varsayılan bir şablon vardır kütüphane bileşeni oluşturma. Yani benim varsayılan şablon şöyle görünür:

<div *ngIf="hasTemplate"><ng-content></ng-content></div> 
<div *ngIf="!hasTemplate"><!-- the default template --></div> 

Ben <foo>..</foo> etiketleri içinde HTML varsa true için hasTemplate ayarlamak için bir yol gerekir.

Answer 1

• Sen encapsulation: ViewEncapsulation.Native geçebilirsiniz sonra içerik

Daha sonra "gölge DOM" öğeleri alabilirsiniz <div #wrapper><ng-content><ng-content><div> etrafında sarıcı eleman ekleyebilir ışık DOM olacak