Angular递归组件出现NG303循环导入错误，如何解决？

针对你遇到的模板层面组件循环引用导致的NG303错误，以下是两种可行的解决思路：

1. 动态加载组件（推荐） #

通过动态导入组件的方式，避免编译时解析循环依赖。修改组件B的代码如下：

import { Component, ViewChild, ViewContainerRef, OnInit } from '@angular/core';

@Component({
  selector: 'b',
  template: `
    @switch (type) {
      @case ('a') {
        <ng-template #aContainer></ng-template>
      }
      @case ('c') {
        <c />
      }
    }
  `,
})
export class b implements OnInit {
  @ViewChild('aContainer', { read: ViewContainerRef }) aContainer!: ViewContainerRef;
  type = 'a';

  async ngOnInit() {
    // 动态导入A组件，绕过编译时循环检查
    const { a } = await import('./a.component');
    this.aContainer.createComponent(a);
  }
}

这种方式在运行时才加载组件A，编译阶段不会触发循环导入检查，完美适配你的场景。

2. 调整组件结构，使用内容投影 #

如果组件间的交互逻辑允许，抽离重复依赖部分，通过内容投影替代直接引用：

修改组件A的模板：

elements: <ng-content></ng-content>

然后在父组件中组合两个组件：

<a>
  <b [type]="'c'"></b>
</a>

组件B中如果需要渲染A，也通过父组件传递内容的方式实现，彻底避免模板中的直接互相引用。

内容的提问来源于stack exchange，提问作者Flo