Ich kämpfe, um einen Weg zu finden, dies zu tun. In einer übergeordneten Komponente beschreibt die Vorlage eintable und seinthead -Element, aber Delegaten, die das @ rendetbody zu einer anderen Komponente, wie folgt:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody *ngFor="let entry of getEntries()">
    <my-result [entry]="entry"></my-result>
  </tbody>
</table>

Jede myResult-Komponente rendert ihre eigenentr tag, im Grunde wie folgt:

<tr>
  <td>{{ entry.name }}</td>
  <td>{{ entry.time }}</td>
</tr>

Der Grund, warum ich dies nicht direkt in die übergeordnete Komponente einbaue (da keine myResult-Komponente erforderlich ist), ist, dass die myResult-Komponente tatsächlich komplizierter ist als hier gezeigt. Daher möchte ich ihr Verhalten in einer separaten Komponente und Datei ablegen.

Das resultierende DOM sieht schlecht aus. Ich glaube, das liegt daran, dass es ungültig ist, datbody kann nur @ enthalttr elements (siehe MDN), aber mein generiertes (vereinfachtes) DOM ist:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <my-result>
      <tr>
        <td>Bob</td>
        <td>128</td>
      </tr>
    </my-result>
  </tbody>
  <tbody>
    <my-result>
      <tr>
        <td>Lisa</td>
        <td>333</td>
      </tr>
    </my-result>
  </tbody>
</table>

Gibt es eine Möglichkeit, dass wir das Gleiche rendern können, aber ohne die Umhüllung<my-result> tag, und während Sie immer noch eine Komponente verwenden, die allein für das Rendern einer Tabellenzeile verantwortlich ist?

Ich habe @ angeschang-content, DynamicComponentLoader, dasViewContainerRef, aber meines Erachtens bieten sie keine Lösung dafür.