Question

我正在学习angular2，我基本上要做的是创建一个组件，（某些方法）可以包含其他组件。

我的意思是，我希望创建一个可以包含内容的组件Card。

这是一个例子：

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

我想多次重复使用Card，我该如何创建这样的组件？

Answer 1

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

Answer 2

如果您正在使用TypeScript（建议使用角度），则可以导入已定义选择器的组件，将其添加为指令并使用包含组件的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 {
}

如何在Angular2中创建容器组件

2 个答案: