角:如何解决指令和组件之间的循环依赖关系？

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>;

随着webpack最新更新的角-cli，我得到以下警告时，建设：

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

1. 按目的排列您的文件结构。
2. 对于每个文件夹组，添加一个index.ts文件。
3. 在index.ts中，导出模块、组件、文件夹和/或等。

例如，内部组件/共享/按钮/索引。

export * from './radiobuttoncomponent';

在无线电按钮文件夹外添加另一个带有index.ts的export * from './radiobutton';

在导入中，更新引用以使用通用路径

import { RadioButtonComponent} from "./shared";