防止 angular 递归加载组件

Question

我正在将组件动态加载到动态位置，因为该组件是 table 行，所以我使用 selector: 'td' 因为我需要将 colspan 应用到动态添加的行然后在其中加载动态组件。问题是我的组件是一个 table，它包含 <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

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

selector: 'td[custom]'

然后像这样使用它：

<td custom></td>

防止 angular 递归加载组件

prevent angular from recursively loading component

angular

recursion

angular-dynamic-components