时间戳

首页 > 解决方案 > 防止 Angular 递归加载组件

angular - 防止 Angular 递归加载组件

问题描述

我正在将组件动态加载到动态位置，并且由于该组件是我正在使用的表行，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", 
   },
})

如果无法预防，我的其他选择是什么？我正在考虑替换<td>为<div>！

标签： angularrecursionangular-dynamic-components

解决方案

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

selector: 'td[custom]'

然后像这样使用它：

<td custom></td>

推荐阅读