Angular2でコンテナコンポーネントを作成するには

Question

私は基本的にangle2を学んでいますが、基本的にしようとしているのは、他のコンポーネントを含むことができるコンポーネントを作成することです。

私は、内部にコンテンツを持つ可能性があるコンポーネントCardを作成したいと考えています。

これは一例です：

<Card> 
    <span>Some Content</span> 
</Card> 

私がしたいの再利用のカードは何回できた、どのように私はそのようなコンポーネントを作成することができますか？

Answer 1

コンポーネントのテンプレートに<ng-content></ng-content>というディレクティブを使用して、その場所にコンテンツを挿入できます。

Answer 2

セレクタが定義されているコンポーネントをインポートし、そのコンポーネントをディレクティブとして追加し、包含コンポーネントのHTMLにセレクタを使用することができます。これは以下のように行うことができます。

cards.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'card', 
    template: '<span>Some Content</span>' 
}) 
export class CardComponent { 

} 

container.ts

import { Component }  from '@angular/core'; 
import { CardComponent } from './cards.ts'; 

@Component({ 
    directives: [CardComponent], 
    template: '<div><card></card><card></card></div>' 
}) 
export class ContainerComponent { 
}