предотвратить угловую от рекурсивной загрузки компонента

Question

Я загружаю компонент динамически в динамическую позицию, и так как этот компонент является строкой таблицы, я использую selector: 'td', потому что мне нужно применить colspan к динамически добавляемой строке, а затем загрузить в нее динамический компонент.Проблема в том, что мой компонент представляет собой таблицу, содержащую теги <td>, и эти теги приводят к угловому переходу в бесконечный рекурсивный цикл!

Какие у меня есть альтернативы?

Я рассмотрел несколько способовкак рекурсивный компонент работает, но не может придумать способ помешать угловой мысли думать, что тег не нужен. Попытался использовать *ngTemplateOutlet, но потерял

@Component({
  selector: 'td',
  template: `
  <div style="background:red">
    <td>Mark</td> <!-- This is the problem! -->
  </div>
  `,
  host: {
      "[attr.colspan]": "3", 
   },
})

Если предотвращение невозможно, то какиедругие мои варианты?Я думал о замене <td> на <div>!

Answer 1

Не заменяйте td на div и не переопределяйте стандартные теги html! Что, если вы импортируете компонент, и этот компонент тоже использует td или div? Вы действительно хотите, чтобы он был заменен вашим шаблоном? Это сломало бы все! Просто используйте другое имя (возможно, с пространством имен, например app-td) или используйте атрибут, чтобы различать его:

selector: 'td[custom]'

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

<td custom></td>