表体内的组件问题

Question

在某些情况下，我必须在表格主体中渲染组件，但是我面临样式问题

案例：有5个表格标题和5列将在组件上呈现

即

parnet.component.ts

 <table class="table table-bordered">
      <thead>
    <tr>
      <th>name</th>
      <th>child</th>
      <th>child1</th>
      <th>child2</th>
      <th>child3</th>

    </tr>
      </thead>
 </thead>
  <tbody>

   <app-child></app-child>

  </tbody>
</table>

有5个标题，组件将具有详细信息，即

child.component.ts

<tr>
  <td>parent1</td>
  <td>a</td>
  <td>a</td>
  <td>a</td>
  <td>a</td>
  <td>a</td>
</tr>

破坏了桌子的风格和概念

如果我用直接html替换组件调用，效果很好

    <table class="table table-bordered">
  <thead>
<tr>
  <th>name</th>
  <th>child</th>
  <th>child1</th>
  <th>child2</th>
  <th>child3</th>
</tr>
  </thead>
  <tbody>


  <tr>
    <td>parent1</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
  </tr>

  </tbody>
</table>

使用内部HTML替换app-child

现在它可以正常工作，但是如果我检查并删除突出显示的区域/标签，则该组件面临问题，即_ngcontent-c1 =“” _nghost-c3 =“”获得了正确的结果

任何人都可以向我建议正确的解决方案，以编程方式进行

我尝试在父级中不使用View封装，但是在angular6中出现了错误