В Angular, как удалить тег селектора вокруг шаблона компонента?

Question

В 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> следуют той же схеме, поэтому я хочу превратить их в тот же шаблон. Беда в том, что угловые метки искажают структуру стола.

Answer 1

Вместо этого вы можете использовать селектор атрибута в @component декораторе: -

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

А затем используйте его как: -

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

Согласно документации: -

Вы можете указать селектор CSS, который идентифицирует эту директиву в шаблоне. Поддерживаются следующие селекторы: element, [attribute], .class и: not ().

Не поддерживает селекторы родительско-дочерних отношений.