Angular组件，它是两行，将添加到另一个表

Question

我正在创建一个组件“模板”（我认为这是正确的词），可以是两行

@Componenet({
  selector: '[my-row]',
  template: `
  <tr>
    <td>first</td>
    <td>second</td>
  </tr>
  <tr *ngIf="secondRow">
    <td>foo</td>
    <td>bar</td>
  </tr>`
})
export class MyRowComponent {
  @Input() secondRow = false;
}

我想在另一个组件中使用它

<table>
  <element my-row></element>
  <element my-row secondRow="true"></element>
  <element my-row></element>
  <element my-row></element>
</table>

但我不确定应该是什么“元素”。

如果我只想要一行，我可以从MyRowComponenet中删除“tr”，然后将其设为<tr my-row></tr>，但由于我想要两行，这似乎不可能。 <tbody>不是一个选项，因为我只能在表中使用其中一个。

我尝试使用<ng-component>和<ng-template>，但在使用它时出现了晦涩的错误。

我的用例不需要使用div而不是表。

任何人都可以帮助我吗？

编辑：请注意，将element设为tr不起作用。因为它只是在您尝试创建的表的第一个单元格内创建一个表。以下是两个展示这一点的组件。

import { Component, Input } from '@angular/core';

@Component({
  selector: '[my-row]',
  template: `
  <tr>
    <td>{{ firstWord }}</td>
    <td>{{ secondWord }}</td>
  </tr>
  <tr *ngIf="secondRow">
    <td>fooooooooooooooo</td>
    <td>bar</td>
  </tr>
  `
})
export class MyRowComponent {
  @Input() firstWord = 'first';
  @Input() secondWord = 'second';
  @Input() secondRow = false;
}

和使用行的TableComponent。

import { Component } from '@angular/core';

@Component({
  selector: 'my-table',
  template: `
  <table class="table">
    <tr>
      <td>column 1</td>
      <td>column 2</td>
    </tr>
    <tr my-row firstWord="hello world" secondWord="good bye">
    <tr my-row secondRow="true">
    <tr my-row>
  </table>`
})
export class MyTableComponent {}

Answer 1

我的建议是组件如：

@Component({
  selector: 'tr[my-row]',
  template: `
    <td>{{ firstWord }}</td>
    <td>{{ secondWord }}</td>

    <ng-template #secondRow>
      <tr>
        <td>fooooooooooooooo</td>
        <td>bar</td>
      </tr>
    </ng-template>
  `
})
export class MyRowComponent {
  @Input() firstWord = 'first';
  @Input() secondWord = 'second';
  @Input() secondRow = false;

  @ViewChild('secondRow') template: TemplateRef<any>;

  constructor(private vcRef: ViewContainerRef) {}

  ngOnInit() {
    if(this.secondRow) {
      this.vcRef.createEmbeddedView(this.template);
    }
  }
}

<强> parent.html

<table class="table">
  <tr>
    <td>column 1</td>
    <td>column 2</td>
  </tr>
  <tr my-row firstWord="hello world" secondWord="good bye">
  <tr my-row secondRow="true">
  <tr my-row>
</table>

<强> Plunker Example