我有一个由两个部分组成的递归结构:

  • OptionsMenuComponent(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。如果没有该选项,则在加载页面时会出现以下错误:



    目前,它的编写方式(使用forwardRef)效果很好,但TSLint不满意,并输出以下内容:



    我在网上四处寻找替代解决方案,然后空手而归。我只能找到两个建议:
  • 我的forwardRef解决方案
  • “您有一个循环引用,您做错了什么,所以将它们解耦”(不完全是字词)

  • 第一个建议可行,但我的问题是,是否有可能避免这种做法,因为这听起来不像是一种好的做法(而且到处有人说要避免这样做)

    第二个建议是正确的,并且在大多数情况下易于实现,但是我该如何在递归结构中做到这一点(使用angular2组件)?

    谢谢你,

    ps -在此之前,我在一个组件中拥有所有功能,并且该单个组件引用自身没有任何问题(无需forwardRef),所以请不要这样做,因为这里不是这种情况(尝试以使组件小而简单)

    TL; DR:
    两个组件互相引用(需要递归结构)。
    如果不使用forwardRef,则会出现错误,是否有不涉及使用forwardRef的替代解决方案?

    最佳答案

    这是我写的一个递归导航的例子,被简化为一个有序列表。简而言之,您要定义一个要递归的模板,然后遍历根 child (页面集合)context:{ $implicit: root.children },并在每个 child 处通过更改上下文context:{ $implicit: page.children }遍历根 child 。

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

    关于typescript - 使用angular2组件实现递归结构(无forwardRef)?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38612329/

    10-14 19:24
    查看更多