角度組分，它是將被添加到另一個表

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