从角度4中的html中删除主机组件标签

Posted 2023-02-22

【中文标题】从角度4中的html中删除主机组件标签

【英文标题】：Remove host component tag from html in angular 4

【发布时间】：2018-03-22 03:01:46

【问题描述】：

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

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

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

【问题讨论】：

如果您能够设置 Codepen 或类似应用程序的工作示例，我们将有更好的机会帮助您。

选择器：'[my-component]' 是正确的。你只是忘了写输入数据 1 和输入数据 2。

听起来您的 CSS 规则可能过于具体。

@omeralper 我已经为数据 1 和数据 2 添加了 @Input()，如果我使用 可以正常工作，但是由于这些标签 css 被破坏，因此我尝试使用 tr 标签。

【参考方案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!!

【讨论】：

不，您也不必包含“tr”。删除 'tr' 并尝试，它会工作。

但是您应该在选择器中包含tr，因为这仅适用于trs，您还要在哪里添加td？使您的意图清晰并防止错误。仅仅因为它有效，并不意味着你应该这样做

这就像一个指令。没有真正解开。但是一些问题的解决方法。真正展开的组件应该像伪组件ng-container 或ng-template 一样工作。遗憾的是还没有找到解决方案。在某些情况下，让组件没有自己的标签来重用代码而不破坏父级的选择器（例如 3rd 方框架）非常重要。例如如果您有多个元素并且无法包装它。此解决方案（属性选择器）也不适用于此类问题。 ...

添加tr 的另一个原因是，如果您动态创建组件（例如，使用 ComponentPortal，它将能够使用正确的标签正确创建它）。