在Angular2 +中，我该如何替换 <tr> 与我自己的组件，而不会干扰dom结构/ css

Question

Consider the following table snippet with a rows of people and their result on a test:

<tr>
  <td>John Doe</td>
  <td>18</td>
</tr>
<tr>
  <td>Jane Dober</td>
  <td>28</td>
</tr>
<my-own-tr-component></my-own-tr-component>

In the end of the table above, I want to add a final <tr> , which will be my custom component, which will be reused elsewhere.

The problem is that my custom component inserts a dom element in a table which is not a <tr> which breaks the DOM, styling etc.

How can I make Angular NOT insert its own host element and just display the <tr> from my custom component?

I don't want to use attribute selectors since it seems like a hack, and is against Angulars style guide document.

Answer 1

Give the component the table-row display property:

:host { display: table-row; }

That will make it behave for all practical purposes like <tr> . To be precise, it is the display: table-row property defined in the user agent style sheet that makes <tr> function as a table row.