如何在Angular2中创建容器组件

Question

我正在学习Angular2，基本上我的目标是创建一个组件，可以（以某种方式）包含其他组件。

也就是说，我想创建一个名为Card的组件，并在其中放置内容。

以下是示例：

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

我希望能够多次重复使用卡片，我该如何创建这样一个组件？

- Pablo

Answer 1

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

- Comptonburger

Answer 2

如果您正在使用TypeScript（Angular推荐），您可以导入一个带有定义选择器的组件，将其作为指令添加并在包含组件的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 {
}

- dmlittle