Angular两组件循环依赖求助：注入与模板引用冲突

针对你遇到的GridComponent与GridSortingComponent循环依赖问题，以下是几种可行的解决方法：

方案一：抽象接口解耦（推荐） #

通过定义抽象接口分离组件间的依赖，让子组件依赖接口而非具体父组件，彻底解决循环依赖。

步骤1：创建抽象接口 #

新建grid-api.ts文件，定义父组件需要暴露给子组件的方法：

export interface GridApi {
  setDefault(): void;
  // 可添加其他需要被调用的公共方法
}

步骤2：父组件实现接口并提供依赖 #

修改GridComponent.ts，实现接口并将自身注册为接口的提供者：

import { Component, Input, Renderer2, ElementRef, OnInit } from '@angular/core';
import { GridApi } from './grid-api';

@Component({
  selector: 'my-grid',
  templateUrl: './grid.component.html', // 修正原代码中template应为templateUrl
  exportAs: 'myGrid',
  providers: [
    { provide: GridApi, useExisting: GridComponent } // 将当前组件作为GridApi的实现类
  ]
})
export class GridComponent implements OnInit, GridApi {

 constructor(private grid_renderer: Renderer2, private grid_el: ElementRef) {}

 @Input() isSort = false;

 // 实现接口定义的方法
 setDefault(): void {
   // 原方法逻辑
 }

 ... some other code
}

步骤3：子组件依赖抽象接口 #

修改GridSortingComponent.ts，将依赖从具体GridComponent改为抽象GridApi：

import { Component, Input, OnInit, Inject, Optional, Self } from '@angular/core';
import { GridApi } from './grid-api';

@Component({
  selector: 'sorted-grid',
  template: '',
  exportAs: 'SortingGrid'
})
export class GridSortingComponent implements OnInit {

 private _grid?: GridApi;

 @Input()
 set for(value: GridApi) {
   if (!this._grid) {
     this._grid = value;
   }
 }
 
 // 注入GridApi接口实例，@Self()确保只获取父组件提供的实例
 constructor(@Inject(GridApi) @Optional() @Self() private gridApi?: GridApi) {}

 ngOnInit() {
   const targetGrid = this._grid || this.gridApi;
   if (targetGrid) {
     targetGrid.setDefault();
   }
 }
}

步骤4：模板传递父组件实例 #

修改grid.component.html，将父组件自身传入子组件的for输入属性：

<sorted-grid *ngIf="isSort" [for]="this"></sorted-grid>

方案二：移除构造注入，完全通过@Input传递 #

保留子组件的@Input属性，移除构造函数中对GridComponent的直接注入，同时使用类型导入避免编译时循环依赖。

修改GridSortingComponent.ts #

import { Component, Input, OnInit } from '@angular/core';
// 使用type关键字仅导入类型，不参与运行时打包
import type { GridComponent } from './grid.component';

@Component({
  selector: 'sorted-grid',
  template: '',
  exportAs: 'SortingGrid'
})
export class GridSortingComponent implements OnInit {

 private _grid?: GridComponent;

 @Input()
 set for(value: GridComponent) {
   if (!this._grid) {
     this._grid = value;
   }
 }
 
 // 移除构造函数中的GridComponent注入
 constructor() {}

 ngOnInit() {
   if (this._grid) {
     this._grid.setDefault();
   }
 }
}

修改模板传递实例 #

同方案一的模板修改：

<sorted-grid *ngIf="isSort" [for]="this"></sorted-grid>

方案三：通过Injector延迟获取实例（备选） #

如果必须保留构造注入逻辑，可以借助Injector延迟获取父组件实例，避免即时导入导致的循环依赖：

修改GridSortingComponent.ts #

import { Component, Input, OnInit, Injector } from '@angular/core';
import type { GridComponent } from './grid.component';

@Component({
  selector: 'sorted-grid',
  template: '',
  exportAs: 'SortingGrid'
})
export class GridSortingComponent implements OnInit {

 private _grid?: GridComponent;

 @Input()
 set for(value: GridComponent) {
   if (!this._grid) {
     this._grid = value;
   }
 }
 
 private grid?: GridComponent;

 constructor(private injector: Injector) {}

 ngOnInit() {
   // 延迟获取父组件实例，避免启动时循环依赖
   if (!this._grid) {
     try {
       this.grid = this.injector.get<GridComponent>(GridComponent as any);
     } catch (e) {
       // 处理实例获取失败的情况
     }
   }
   const targetGrid = this._grid || this.grid;
   if (targetGrid) {
     targetGrid.setDefault();
   }
 }
}

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