Angular 2: 将组件包裹在父组件中

Question

我正在尝试将一个组件放入父组件中，就像在 React 中那样。

反应示例：

父组件:

<div>
  Hello from parent
  {this.props.children}
</div>

子组件:

<ParentComponent>
  Hello from child
</ParentComponent>

基本上我想做的是在父标签之间包含子标签。

我想到了传递元素的@Input，但这听起来很错误而且很丑陋。

Answer 1

Parent分量：

<div>
  Hello from parent
  <ng-content select=".txt"></ng-content>
</div>

Child分量：

<ParentComponent>
  <ng-container class="txt">
        Hello from child
    </ng-container>
</ParentComponent>

输出： 来自 parent 的问候来自 child

的问候

Answer 2

鉴于您的 child 组件有一个选择器，假设它被称为 app-child，那么在 parent 组件的 HTML 模板中，您可以这样称呼它：

<div>
  Hello from parent
  <app-child></app-child>
</div>

现在，child 组件的 HTML 中的所有内容都将按原样显示。此外，如果您需要将输入从 parent 传递到 child，您可以这样做：

<div>
  Hello from parent
  <app-child [objInChild]="valFromParent"></app-child>
</div>

其中 valFromParent 是 parent 可以提供的值，objInChild 是您在 [=25] 中用 @Input 注释的 object =] 的 class 组件（比如在文件 child.component.ts 中）接收传入的值。

Angular 2: Wrapping a component inside a parent component