Пользовательский компонент внедрен в строку таблицы

Question

У меня есть таблица, созданная в одном компоненте A, в котором есть несколько элементов строки таблицы. Затем у меня есть другой компонент B, в котором есть только несколько элементов строки таблицы, которые будут повторно использоваться в приложении в коде шаблона. Проблема заключается в том, что при использовании componentB внутри таблицы componentA элементы строки таблицы не охватывают всю ширину таблицы и кажутся разбитыми за пределами таблицы.

Я нашел ссылки на несколько других подобных проблем, но они используют динамические строки, основанные на данных, которые передаются для каждой строки. Моя проблема в том, что у меня есть фиксированный набор строк, которые будут использоваться в приложении. Я пытался использовать следующие примеры:

--- 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>

Вот пример стекаблица именно этой проблемы: https://stackblitz.com/edit/angular-ydsgaz

Элементы в componentB должны охватывать ширину таблицы так же, как обычный элемент, используемый в componentA, но это не так. Любая помощь будет отличной!

ОТВЕТ: любой из следующих примеров будет работать для этого сценария

• контент-проекция: https://stackblitz.com/edit/angular-dr6fqs

• ссылка на шаблон (мой предпочтительный способ): https://stackblitz.com/edit/angular-qgxzhv

Answer 1

Использовать угловую проекцию контента.Вам просто нужно добавить селектор директивы в тело таблицы. app.component.html

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

, а затем в table-lines.component.html add ng-content element.Angular заменит этот элемент ng-content содержимым внутри основного элемента директивы.

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

Рабочий пример https://stackblitz.com/edit/angular-dr6fqs