Angular中用@Optional()@Host()仍遇循环依赖，求组件通信解决方案

这个循环依赖报错的核心原因是：你在组件的构造函数里直接尝试注入自身类型的宿主实例——哪怕加了@Optional()和@Host()，Angular的DI系统在初始化组件时，会发现需要先创建当前组件实例才能解析依赖，但解析依赖又需要当前组件的宿主实例，形成了无法打破的循环链。

下面给你两种可靠的修复方案，都能适配你运行时编译组件的场景：

方案一：使用Injector延迟获取宿主实例 #

把依赖获取的时机从构造函数推迟到组件初始化完成后，通过Injector手动获取宿主实例，避免构造阶段的循环解析：

import { Component, AfterViewInit, Input, Injector, InjectFlags } from '@angular/core';

@Component({
  selector: 'app-mycomponent',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css']
})
export class DataComponent implements AfterViewInit {
  host: DataComponent | null = null;
  @Input() data: any = null;

  constructor(private injector: Injector) { }

  ngAfterViewInit() {
    if (!this.data) {
      // 手动获取宿主组件实例，同时保留可选、宿主限定的特性
      this.host = this.injector.get(
        DataComponent, 
        null, 
        InjectFlags.Host | InjectFlags.Optional
      );
      if (this.host) {
        this.data = this.host.data;
      }
    }
  }
}

方案二：使用Setter注入替代构造函数注入 #

Angular支持通过setter方法注入依赖，这种方式会在组件实例创建完成后再执行赋值，完美避开构造阶段的循环问题：

import { Component, AfterViewInit, Input, Optional, Host, Inject } from '@angular/core';

@Component({
  selector: 'app-mycomponent',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css']
})
export class DataComponent implements AfterViewInit {
  host: DataComponent | null = null;
  @Input() data: any = null;

  constructor() { }

  // 通过setter注入宿主实例，保留@Optional()和@Host()的特性
  @Optional()
  @Host()
  @Inject(DataComponent)
  set _host(value: DataComponent) {
    this.host = value;
  }

  ngAfterViewInit() {
    if (!this.data && this.host) {
      this.data = this.host.data;
    }
  }
}

为什么原来的写法会报错？ #

当你在构造函数中注入@Host() DataComponent时，Angular的DI系统会立刻尝试解析这个依赖：

1. 要创建当前DataComponent实例，需要先获取它的宿主DataComponent实例
2. 但宿主DataComponent的创建（如果是嵌套场景）又可能依赖当前组件的初始化，或者DI系统误以为需要先创建当前实例来满足依赖，最终形成循环引用链，触发Cannot instantiate cyclic dependency!错误。

而上面两种方案都是把宿主实例的获取/赋值推迟到组件初始化完成后，此时宿主实例已经存在，DI系统不需要再处理循环解析的逻辑，自然就不会报错了。

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