Question

我有一个相互依赖的RadioButtonComponent和一个RadioButtonGroupDirective：

RadioButtonComponent：

import { RadioButtonGroupDirective } from "./radio-button-group.directive";
...
constructor(@Optional() @Inject(forwardRef(() => RadioButtonGroupDirective)) radiobuttonGroup: RadioButtonGroupDirective, ...) {

RadioButtonGroupDirective：

import { RadioButtonComponent } from "./radio-button.component";
...
@ContentChildren(forwardRef(() => RadioButtonComponent))
private radioButtons: QueryList<RadioButtonComponent>;

使用angular-cli中的最新webpack更新，构建时会收到以下警告：

WARNING in Circular dependency detected:
lib\controls\radio-button\radio-button-group.directive.ts -> lib\controls\radio-button\radio-button.component.ts -> lib\controls\radio-button\radio-button-group.directive.ts

WARNING in Circular dependency detected:
lib\controls\radio-button\radio-button.component.ts -> lib\controls\radio-button\radio-button-group.directive.ts -> lib\controls\radio-button\radio-button.component.ts

实际上，代码有效，因为我在两种情况下都使用forwardRef()，指定其他类可能尚未加载。但是我该如何解决警告？

通常，我会为两个类中的一个实现一个接口并使用它，但@Inject和@ContentChildren都不能用于接口，对吗？

Answer 1

按目的整理 您的 文件结构。
对于每个文件夹组，添加一个 index.ts 文件。
在index.ts内，导出模块，组件，文件夹和/或其他内容。

例如内部组件/shared/buttons/index.ts

export * from './radiobuttoncomponent';

单选按钮文件夹外部添加另一个index.ts 与export * from './radiobutton';

在您的导入更新中，引用将使用常规路径

import { RadioButtonComponent} from "./shared";

Angular：如何解决指令和组件之间的循环依赖？

1 个答案: