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

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

1. 按用途安排文件 结构。

2. 对于每个文件夹组，添加一个index.ts文件。

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

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

export * from './radiobuttoncomponent';

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

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

import { RadioButtonComponent} from "./shared";