Angular2：ベースコンポーネント - タイトルと内容のパネル

Question

ベースパネルを表すコンポーネント（HTMLテンプレート付き）を作成したいと思います。次に、この基本クラスを継承したいが、タイトル（クラス属性/関数または@Input）とコンテンツ（またはtemplateUrlの@Componentデコレータ）を指定するだけです。

@Component({ 
    template: ` 
     <div class="panel"> 
      <div class="title">{{title}}</idv> 
      <div class="content">???</div> 
     </idv> 
    ` 
}) 
export class BasePanel { 
    @Input() 
    protected title: string = ''; 
} 

@Component({ 
    selector: 'my-panel', 
    template: `MyPanel template - lorem ipsum` 
}) 
export class MyPanel extends BasePanel { 
    title: string = 'MyPanel title'; 
} 

その後、他のテンプレートに：

<my-panel></my-panel> 

または

<my-panel title="My better panel"></my-panel> 

非常に良い解決策は、HTMLタグの間にコンテンツを配信するために、次のようになります。

<my-panel title="My panel with content"> 
    <p>Lorem ipsum dolor sit amet,</p> 
    <p>consectetur adipiscing elit.</p> 
</my-panel> 

編集1

ng-contentを含む@rinukusuの溶液が働いています。

しかし、BasePanelコンポーネントを作成して派生コンポーネントテンプレートをデコレートする可能性があります。

Answer 1

角度は拡張コンポーネントをサポートしていません。 In Angularコンポジションは継承よりも優先されます。それをサポートするカスタムデコレータを提案する回答がありますが、それは今後のオフラインテンプレートコンパイラと互換性がありません。

Answer 2

継承はこれでは機能しませんが、元のHTMLを表示するようにng-contentタグを利用することができます。

成分：

@Component({ 
    selector: 'my-panel', 
    template: ` 
     <div class="panel"> 
      <div class="title">{{title}}</div> 
      <div class="content"><ng-content></ng-content></div> 
     </div> 
    ` 
}) 
export class MyPanel { 
    @Input() 
    protected title: string = ''; 
} 

用途：

<my-panel title="My panel with content"> 
    <p>Lorem ipsum dolor sit amet,</p> 
    <p>consectetur adipiscing elit.</p> 
</my-panel> 

---

ワーキングPlunker使用例のため