Angular2 - ゲット成分光DOMのinnerHTML /子ノード

Question

のは、私はコンポーネントがあるとしましょう：

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

をそして私はこのような別のコンポーネントでそれを消費：

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

がどのように見つけることができますFooにlight DOMの子要素がある場合

私は<h1>some inner HTML</h1>のaholdを取得したいと思います。

オプション1 - @ContentChildren()：これは任意の要素を照会するためには使用できません。現在、角2のコンポーネントまたは変数（#foo）のみがこの方法で照会されます。私がそれを避けることができれば、内側の要素に変数を付ける必要はありません。

オプション2からelementRef.nativeElement：私はFoo成分にElementRefを注入することができるが、成分（コンストラクタで）インスタンス化された時点で、内側の要素が既に除去されて、それが空になります。ライフサイクルの後半（例えば、ngAfterViewInit()）、内部要素はシャドウDOM（つまり<div>foo</div>）になります。

私が紛失している方法はありますか？ユースケース

が、私はこれをしたい理由について、いくつかのコンテキストを与えるために、私は、ユーザーが決定した場合は、カスタムテンプレートに置き換えることができるデフォルトのテンプレートを、持っているライブラリコンポーネントを作成しています。だから私のデフォルトのテンプレートは次のようになります。

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

は私が<foo>..</foo>タグ内のHTMLがある場合trueにhasTemplateを設定するには、いくつかの方法が必要です。

Answer 1

• あなたはencapsulation: ViewEncapsulation.Nativeに切り替えることができ、コンテンツは、光のDOMに

• になりますあなたは、あなたは、「シャドウDOM」

から要素を取得することができます <div #wrapper><ng-content><ng-content><div>周りのラッパー要素を追加することができます