使用angular2组件实现递归结构(无forwardRef)

Question

我有一个递归结构，它由两个组件组成：

• 选项菜单组件（A菜单）
• MenuItemComponent（菜单项）

选项菜单组件：（模板+组件）

Template:
    <menu-item *ngFor="let menuItem of menu.menuItems" [menuItem]="menuItem"> </menu-item>
Component:
    import { Component, Input } from '@angular/core';
    import { Menu } from '../models/menu.model';
    import { MenuItemComponent } from '../menu-item/menu-item.component';
    @Component({
        moduleId: __moduleName,
        selector: 'options-menu',
        templateUrl: 'options-menu.component.html',
        styleUrls: ['options-menu.component.css'],
        directives: [MenuItemComponent],
    })
    export class OptionsMenuComponent {
        @Input() menu: Menu;
        constructor() { }
    }

菜单项：（模板+组件）

Template:
    <span class="menu-item-title">{{menuItem.title}}</span>
    <options-menu *ngIf="menuItem.subMenu != null" [menu]="menuItem.subMenu" class="sub-menu"> </options-menu>
Component:
    import { Component, Input, forwardRef } from '@angular/core';
    import { MenuItem } from '../models/menu-item.model';
    import { OptionsMenuComponent } from '../options-menu/options-menu.component';
    @Component({
        moduleId: __moduleName,
        selector: 'menu-item',
        directives: [forwardRef(() => OptionsMenuComponent)],
        templateUrl: 'menu-item.component.html',
        styleUrls: ['menu-item.component.css'],
    })
    export class MenuItemComponent {
        @Input() menuItem: MenuItem;
        constructor() { }
    }

注意：我删除了几乎所有的逻辑和设计以简化，因为它与无关

正如您所看到的，OptionsMenuComponent知道MenuItemComponent，反之亦然
此外，您可能已经注意到，在MenuItemComponent中，我在指令中使用了forwardRef。如果没有这一点，当我加载页面时，我会得到以下错误：

错误：未捕获（在promise中）：意外的指令值"未定义"关于组件"MenuItemComponent"的视图

目前它的编写方式（使用forwardRef）很好，但TSLint对此不满意，并输出以下内容：

[gulp-tslint]错误（无正向引用）菜单项。component.ts[9，18]：避免在类"MenuItemComponent"中使用forwardRef

我在网上寻找替代方案，但一无所获。我能找到的只有两个建议：

• 我与forwardRef的解决方案
• "你有一个循环引用，你做错了什么，所以把它们解耦"（不是确切的词）

第一个建议是可行的，但我的问题是，是否有可能避免这种情况，因为这听起来不像是一种好的做法（无论在哪里，人们都说要避免）

第二个建议是正确的，在大多数情况下都很容易实现，但我如何在递归结构中做到这一点（使用angular2组件）？

谢谢你，

p.s-在此之前，我在一个组件中拥有所有功能，并且我对单个组件引用自己没有任何问题（不需要forwardRef），所以请不要建议这样做，因为这里的情况并非如此（尽量保持组件小而简单）

TL；DR：
两个相互引用的组件（需要递归结构）。如果不使用forwardRef，我会出错，有没有一个不涉及使用forwardRef的替代解决方案？

Answer 1

这里是我写的递归nav的一个例子，它被分解为有序列表。简言之，您定义了一个用于递归的模板，然后在根子级（页面集合）context:{ $implicit: root.children }上进行迭代，在每个子级上，通过更改上下文context:{ $implicit: page.children }来迭代根子级。

<ng-template #nav let-pages>
  <ol>
    <ng-container *ngFor="let page of pages">
      <ng-container *ngIf="page.public && page.visible">
        <li>
          <a routerLink="/{{page.urlname}}">{{page.name}}</a>
          <ng-container *ngTemplateOutlet="nav; context:{ $implicit: page.children }"></ng-container>
        </li>
      </ng-container>
    </ng-container>
  </ol>
</ng-template>
<ng-container *ngTemplateOutlet="nav; context:{ $implicit: root.children }"></ng-container>