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

Question

我有一个 RadioButtonComponent 和一个 RadioButtonGroupDirective，它们相互依赖:

单选按钮组件:

import { RadioButtonGroupDirective } from "./radio-button-group.directive";
...
constructor(@Optional() @Inject(forwardRef(() => RadioButtonGroupDirective)) radiobuttonGroup: 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()，指定另一个类可能尚未加载。但是我该如何解决这个警告呢？

通常，我会为两个类之一实现一个接口(interface)并使用它，但是 @Inject 和 @ContentChildren 都不能使用接口(interface)，对吧？

Answer 1

1. 按目的安排您的文件结构。

2. 为每个文件夹组添加一个 index.ts 文件。

3. 在 index.ts 中，导出您的模块、组件、文件夹和/或等。

例如内部组件/共享/按钮/index.ts

export * from './radiobuttoncomponent';

在单选按钮文件夹之外 添加另一个 index.ts 使用 export * from './radiobutton';

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

import { RadioButtonComponent} from "./shared";