防止角度递归加载组件

Question

我正在将组件动态加载到动态位置，并且由于该组件是表行，因此我使用selector: 'td'，因为我需要将colspan应用于动态添加行，然后将动态组件加载到它。 问题是我的组件是一个包含<td>标记的表，这些标记导致angular进入无限递归循环！

我有什么选择？

我已经研究了递归组件如何工作的几种方法，但没有找到一种方法来阻止angular认为不需要标签 尝试使用*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>