Angular中组件自行提供的服务如何获取组件实例 如何解决循环依赖问题

你当前的写法触发循环依赖的核心原因是Angular依赖注入的初始化顺序冲突：

1. UserListComponent的providers数组声明了TableSettingsService，意味着组件初始化时需要先完成TableSettingsService的实例创建
2. 你的TableSettingsService构造函数直接要求注入UserListComponent实例，此时UserListComponent还未完成实例化，DI容器无法提供未创建完成的对象，两边互相等待就触发了循环依赖报错。

首先明确结论：TableSettingsService是可以获取到提供它的UserListComponent实例的，只要调整获取时机或依赖解析方式即可。

方案1：使用Injector延迟获取（最稳妥，无兼容问题） #

不在服务的构造函数中直接注入组件，改为注入Injector，等组件初始化完成后再主动获取组件实例：

// TableSettingsService 代码
import { Injectable, Injector, Optional, Self, InjectFlags } from '@angular/core';
import { UserListComponent } from './user-list.component';

@Injectable()
export class TableSettingsService {
    private hostComponent: UserListComponent | null = null;

    constructor(
        private persistentService: PersistentService,
        private injector: Injector
    ) {}

    // 由宿主组件在初始化完成后调用
    init() {
        this.hostComponent = this.injector.get(
            UserListComponent, 
            null, 
            InjectFlags.Self | InjectFlags.Optional
        );
        alert(!!this.hostComponent);
    }
}

然后在UserListComponent的初始化钩子中调用服务的init方法：

// UserListComponent 新增代码
export class UserListComponent {
    constructor(private tableSettingsService: TableSettingsService) {}

    ngOnInit() {
        this.tableSettingsService.init();
    }
}

方案2：使用forwardRef延迟解析依赖类型 #

如果希望直接在服务构造函数中获取组件，可以用forwardRef包裹组件类型，延迟类型解析时机，绕过循环依赖检测：

// TableSettingsService 代码
import { Injectable, Optional, Self, Inject, forwardRef } from '@angular/core';
import { UserListComponent } from './user-list.component';

@Injectable()
export class TableSettingsService {
    constructor(
        persistentService: PersistentService,
        @Optional() @Self() @Inject(forwardRef(() => UserListComponent)) persistentObject: UserListComponent
    ) {
        alert(!!persistentObject);
    }
}

该方案依赖Angular原生的forwardRef能力，适合不需要额外初始化逻辑的场景。

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