在 angular 4 中从 html 中删除主机组件标签 [英] Remove host component tag from html in angular 4

问题描述

我有一个表格，我想在其中显示一个表格行，它是一个组件.而且我想将数据传递给该组件:

I have a table in which I want to display a table row, which is a component. And also I want to pass data to that component:

<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和<代码>数据2.

In my-component, the HTML is a few <td></td> with data rendered from data1 and data2.

但是在渲染它之后，由于 </my-component> 我的 CSS 被破坏导致所有 my-component HTML(整个表格行)显示在第一列.

But after rendering it, because of <my-component></my-component> my CSS is breaking resulting in all my-component HTML (whole table row) displaying in 1st column.

以上结果:

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

但这会导致错误无法绑定到data1"，因为它不是tr"的已知属性.

我也不能使用 @Directive 因为我想呈现 HTML.

Also I can not use @Directive as I want to render HTML.

如何在没有 的情况下渲染 的模板标签?

How can I render template of <my-component></my-component> without <my-component></my-component> tag?

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

Other answers are of previous versions of angular. I am using Angular 4.3.4.

任何帮助将不胜感激..！

Any help would be appreciated..!

推荐答案

你还需要在选择器中包含 tr，如下所示，

you need to include tr as well in selector like below,

@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 4 中从 html 中删除主机组件标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！