html - 自定义组件注入(inject)表格行

Question

我有一个在一个 componentA 中创建的表，该表中有多个表行元素。然后我有另一个 componentB，它只有几个表行元素，这些元素将在模板代码中的整个应用程序中重复使用。问题是，当在 componentA 的表内使用 componentB 时，表行元素没有跨越表的整个宽度，并且似乎在表外被破坏了。

我找到了对其他几个类似问题的引用，但它们使用的是基于为每一行传入的数据的动态行。我的问题是我有一组固定的行将在整个应用程序中使用。我尝试使用以下示例:

--- componentA
<table>
 <tr><td>Name</td></tr>
 <tr componentB></tr> --- does not work
</table>

--- componentB --- selector: '[componentB]'
<tr><td>Phone Number</td></tr>
<tr><td>Email</td></tr>

--- componentA
<table>
 <tr><td>Name</td></tr>
 <componentB></componentB> --- does not work
</table>

--- componentB --- selector: 'componentB'
<tr><td>Phone Number</td></tr>
<tr><td>Email</td></tr>

这是一个确切问题的 stackblitz 示例:https://stackblitz.com/edit/angular-ydsgaz

componentB 中的元素应该像 componentA 中使用的普通元素一样跨越表格的宽度，但它们不是。任何帮助都会很棒!

答案:以下任一示例都适用于这种情况

• 内容投影:https://stackblitz.com/edit/angular-dr6fqs

• 模板引用(我的首选方式):https://stackblitz.com/edit/angular-qgxzhv

Answer 1

使用 Angular 内容投影。您只需向表体添加一个指令选择器。app.component.html

<table>
  <tbody app-table-rows>
    <tr>
      <td>name</td>
      <td>bob</td>
    </tr>
  <tbody>
</table>

然后在 table-rows.component.html 添加 ng-content 元素。 Angular 将用指令宿主元素中的内容替换此 ng-content 元素。

<ng-content></ng-content>
<tr>
  <td>email</td>
  <td>bob@gmail.com</td>
</tr>
...

工作示例 https://stackblitz.com/edit/angular-dr6fqs