角2は、コンポーネント継承テンプレート内のコンポーネントhtmlを含む

Question

私はhtml/tsファイルでコンポーネントAを持っています。 Aから2番目のコンポーネントBを継承すると、最初のコンポーネントのすべてのプロパティとメソッドが使用されます。コンポーネントA htmlを使用する場合は、templateUrlプロパティのcomp A htmlを参照できます。

私は問題があります。私はコンポーネントのHTMLを使用したいが、私はそれを拡張したい。ですから、私の考えは、最初のコンポーネントhtmlを2番目のコンポーネントに "インクルード"しています。 Angular2で可能ですか？別の方法がありますか？

コンポーネントBのコンポーネントAのインスタンスを作成したくありません。これはhtmlマークアップだけです。

編集：私はhello2のHTMLでハローコンポーネントのインスタンスを作成する場合

https://stackblitz.com/edit/ng-content-projection-lzjwea

私はHello2 TSを継承し、それは取る：私の問題はこの例で

ありそのnameプロパティ。

1. 変更作成することなく、第一成分のHTMLを参照する方法を見つける入力へのすべての継承コンポーネントで使用され、
2. 重複HTMLコード
3. を注入する必要があるすべてのプロパティ：私は3つのソリューションを発見しましたそれのインスタンス。

私は最善の解決策が3番目だと思います。しかし、私はそれを行う方法を知らない。

Answer 1

ng-contentは、コンポーネントの動的コンテンツを投影するために使用することができます。

例えば、

<div id='border'> 
    <h1>Base Component</h1> 
    <p>ng-content could be used for projecting dynamic content within a component</p> 
    <ng-content> 
     <!-- Dynamic content goes here --> 
    </ng-content> 
</div> 

だから、今では

<hello> 
    <!-- dynamic html here --> 
</hello> 

app.component.htmlの間にあるものは何でも、次の

hello.component.htmlに考えます

<hello> 
    <div style="border: 2px solid red"> 
    <h2>Child Component</h2> 
    <button id="sample1"> Sample 1 </button> 
    <button id="sample2"> Sample 2 </button> 
    </div> 
</hello> 

Example

希望これは