从 angular 中的 html 中删除主机组件标记 4

Question

我有一个 table，我想在其中显示一个 table 行，它是一个组件。而且我还想将数据传递给该组件：

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component [data1]="data1" [data2]="data2"></my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

在my-component中，HTML是一些<td></td>，数据来自data1和data2。

但是在渲染之后，由于 <my-component></my-component> 我的 CSS 被破坏导致所有 my-component HTML（整个 table 行）显示在第一个列。

以上结果：

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component>
            <td>data1.prop1</td>
            <td>data1.prop2</td>
        </my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

我尝试了以下方法：

@Component({
    selector: '[my-component]',
    templateUrl: 'my-component.html'
})

<tr my-component [data1]="data1" [data2]="data2"></tr>

但这会导致错误 Can't bind to 'data1' since it isn't a known property of 'tr'。

我也不能使用 @Directive 因为我想渲染 HTML.

如何在没有 <my-component></my-component> 标签的情况下呈现 <my-component></my-component> 的模板？

其他答案是 angular 以前版本的答案。我正在使用 Angular 4.3.4.

如有任何帮助，我们将不胜感激..！

Answer 1

您还需要在如下选择器中包含 tr，

@Component({
 selector: 'tr[my-component]',
 template: `
   <td>{{data1.prop1}}</td>
   <td>{{data1.prop2}}</td>
   <td>{{data2.prop1}}</td>
 `
})
export class MyComponent {
  @Input() data1;
  @Input() data2;
}

检查这个 Plunker!!

从 angular 中的 html 中删除主机组件标记 4

Remove host component tag from html in angular 4

html

css

angular-template

angular-directive

angular