Angular2 - Get lekkie składnik DOM InnerHTML węzły/dziecko

Question

Powiedzmy mam komponent:

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

I spożywać go w innym składniku tak:

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

Jak mogę się dowiedzieć, czy Foo ma jakieś elementy podrzędne w świetle DOM?

Chcę pobrać wartość <h1>some inner HTML</h1>.

Opcja 1 - @ContentChildren(): Nie można jej użyć do wyszukiwania arbitralnych elementów; obecnie tylko elementy lub zmienne Angular 2 (#foo) mogą być wyszukiwane w ten sposób. Nie chcę dodawać zmiennej do wewnętrznych elementów, jeśli mogę tego uniknąć.

Wariant 2 - elementRef.nativeElement: można wstrzykiwać ElementRef do składnika Foo, ale gdy składnik jest instancja (w konstruktora), wewnętrzne elementy zostały już usunięte, a będzie pusta. Później w cyklu życia (na przykład ngAfterViewInit()) wewnętrzne elementy będą po prostu cieniem DOM (to jest <div>foo</div>).

Jakieś inne metody, których mi brakuje?

Use Case

Aby dać pewien kontekst, dlaczego chcę to zrobić, tworzę składnik biblioteki, która posiada domyślny szablon, który może być zastąpiony przez szablonu niestandardowego, jeśli użytkownik zdecyduje. Więc mój domyślny szablon wygląda tak:

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

Potrzebuję jakiś sposób ustawić hasTemplate do true jeśli istnieje HTML wewnątrz <foo>..</foo> tagów.

Answer 1

• Możesz przełączyć się encapsulation: ViewEncapsulation.Native wtedy zawartość będzie w DOM światła

• Można dodać element otoki wokół <div #wrapper><ng-content><ng-content><div> następnie można uzyskać elementy z „szarej DOM”