How to make a container component in Angular2

Question

I'm learning angular2, What I'm basically trying to do is to create a component, that (some how), could contain other components.

I mean, I want a to create a component Card that could have content inside.

This is an example:

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

I want to could re-use Card many times, how can I create a component like that?

Answer 1

您可以在组件的模板中使用指令<ng-content></ng-content>在该位置插入内容。

Answer 2

If you're using TypeScript (which angular recommends), you can import a component with a selector defined, add it as directive and use the selector in the HTML of the encompassing component. This can be done as follows:

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 {
}