Angular 2：将组件包装在父组件中

Question

我试图将一个组件放在父组件中，就像在React中完成它一样。

反应示例：

父组件：

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

子组件：

<ParentComponent>
  Hello from child
</ParentComponent>

基本上我尝试做的是在父标记之间包含子项。

传递@Input元素的想法，但它听起来错误和丑陋。

Answer 1

父组件：

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

子组件：

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

<强>输出： 父母你好 孩子你好

Answer 2

假设你的子组件有一个选择器，比如它叫app-child，那么在父组件的HTML模板中你可以像这样调用它：

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

现在，您孩子组件的HTML中的所有内容都将按原样显示。此外，如果您需要将输入从父级传递给子级，您可以执行以下操作：

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

其中valFromParent是父级可以提供的值，objInChild是您在孩子的班级组件中使用@Input注释的对象（例如在child.component.ts文件中）接收传入的值。