防止 Angular 递归加载组件

Question

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

我有哪些选择？

我已经研究了一些关于递归组件如何工作的方法，但无法找到阻止 angular 认为不需要标签的方法 尝试使用*ngTemplateOutlet但迷路了

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

如果无法预防，我还有哪些其他选择？我正在考虑用<div> 替换<td>！

Answer 1

不要将td 替换为div，也不要覆盖标准的html 标签！如果您导入一个组件并且该组件也使用td 或div 怎么办？您真的希望将其替换为您的模板吗？那会破坏一切！只需使用另一个名称（可能使用像app-td 这样的命名空间）或使用属性来区分它：

selector: 'td[custom]'

然后像这样使用它：

<td custom></td>