时间戳

首页 > 解决方案 > 在 Angular 中，如何从组件模板周围删除选择器标签？

angular - 在 Angular 中，如何从组件模板周围删除选择器标签？

问题描述

在 Angular 中，如何从组件模板周围删除选择器标签？浏览器在组件内显示<td>字段时出现问题。我有很多实例，<tr>每个实例的第一个<td>样式都不同：

<tr>
  <td>1.1</td><td>1.2</td>
        <app-summary-data-row [data]="data[1]">
        </app-summary-data-row>
    </tr>
    <tr>
            <td colspan=2>2</td>
            <app-summary-data-row [data]="data[2]">
            </app-summary-data-row>
        </tr>

但是，大多数集都<td>遵循相同的模式，所以我想将它们制作成相同的模板。问题是角度的标签，它扭曲了表格的结构。

标签： angulartemplatescomponentsselector

解决方案

@component您可以在装饰器中使用属性选择器：-

@Component({
  selector: '[component-name]'
  ...
})

然后将其用作：-

<div component-name>
  ...
</div>

根据文档：-

您可以指定一个 CSS 选择器来标识模板中的此指令。支持的选择器包括 element、[attribute]、.class 和 :not()。

不支持父子关系选择器。

推荐阅读