解决@ContentChild / @ContentChildren

Question

我有两个非常简单的组件，它们位于两个不同的文件中。 MenuItem 可以包含一个 MenuGroup ，它是更多 MenuItem 的列表。如果MenuItem不包含MenuGroup，则它将是终结点项目。

这将帮助我构建一个任意嵌套的导航菜单，如下所示：

// template of some navigation menu component

...
<app-menu-group>

  <app-menu-item title="Europe">
    <app-menu-group>
      <app-menu-item title="United Kingdom"></app-menu-item>
      <app-menu-item title="Germany"></app-menu-item>
    </app-menu-group>
  </app-menu-item>

  <app-menu-item title="America">
  </app-menu-item>

</app-menu-group>

当您查看我的两个不同文件时，就会出现问题。它们相互导入，由于检测到循环依赖而导致编译器失败。

// menu-item.component.ts

import { ... } from '@angular/core';
import { MenuGroupComponent } from './menu-group.component';

@Component({
  selector: 'app-menu-item',
  template: ``,
  styles: [``]
})
export class MenuItemComponent {

  @ContentChild(forwardRef(() => MenuGroupComponent)) menuGroup?: MenuGroupComponent;

  @Input() title: string;

}

menu-group.component.ts

import { ... } from '@angular/core';
import { MenuItemComponent } from './menu-item.component';

@Component({
  selector: 'app-menu-group',
  template: ``,
  styles: [``]
})
export class MenuGroupComponent {

  @ContentChildren(forwardRef(() => MenuItemComponent)) menuItems: QueryList<MenuItemComponent>;

}

理论上，由于 forwardRef ，Angular应该已经解决了循环问题，这使我可以为两个组件引用尚未定义的类。问题是Typescript编译器还是很生气。

最奇怪的是，这 perfectly 完全可以在StackBlitz（我用来开发原型）上工作，而在AngularCLI编译器中却无法使用。

---> This is the StackBlitz. <---

特别有趣的地方：

将类放在同一文件中，可以解决编译问题，但会导致运行时错误，例如 forwardRef 无法正常工作。