从角度4中的html中移除主机组件标记 [英] Remove host component tag from html in angular 4

问题描述

我有一个表格，我想在其中显示一个表格行，这是一个组件。我还想将数据传递给该组件：

 < table> 
< th> 
< td> col 1< / td> 
< td> col 2< / td> 
< td> col 3< / td> 
< / th> 
< tr> 
 < / 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> 
< 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> 
  

我尝试了以下方法：

<$ p $ （$ {$ b $选择器：'[my-component]'，
templateUrl：'my-component.html'
}）



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

另外我不能使用 @Directive


如何渲染< my-component>< / my-component>的模板。 没有< my-component>< / my-component> 标签？

其他答案是以前版本的角度。

解决方案

/ div>

选择器：'tr [my-component]'，
模板：`
{{data1.prop1}}< / td>
< td> {{data1。 prop2}}< / td>
< td> {{data2.prop1}}< / td>
`
}）
导出类MyComponent {
@Input（）data1;
@Input（）data2;



检查 Plunker ！

希望这有助于!!

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>

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

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.

Result of above:

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

I tried the following:

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

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

But this results in error Can't bind to 'data1' since it isn't a known property of 'tr'.

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?

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

Any help would be appreciated..!

解决方案

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

Check this Plunker!!

Hope this helps!!

这篇关于从角度4中的html中移除主机组件标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！