typescript – 使用angular2组件实现递归结构(没有forwardRef)？

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

> OptionsMenuComponent(菜单)
> MenuItemComponent(菜单项)

OptionsMenuComponent :(模板组件)

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.没有它,当我加载页面时,我收到以下错误：

Error: Uncaught (in promise): Unexpected directive value ‘undefined’
on the View of component ‘MenuItemComponent’

目前它的编写方式(使用forwardRef)它工作得很好但是TSLint对它不满意并输出以下内容：

[gulp-tslint] error (no-forward-ref) menu-item.component.ts[9,18]:
Avoid using forwardRef in class “MenuItemComponent”

我环顾网络寻找替代解决方案并空手而归.我能找到的只有两个建议：

>我的forwardRef解决方案
>“你有一个循环引用,你做错了所以解耦它们”(不是确切的单词)

第一个建议是有效的,但我的问题是,是否可以避免这种情况,因为它听起来不是一个好习惯(并且人们都说要避免它)

对于大多数情况,第二个建议是正确且易于实现的,但我如何在递归结构中使用(使用angular2组件)呢？

谢谢你,

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

TL; DR：
两个组件相互引用(需要递归结构).
不使用forwardRef我得到错误,是否有一个不涉及使用forwardRef的替代解决方案？

这是我写的递归导航的一个例子,剥离到有序列表.简而言之,您要定义一个模板来递归,然后迭代根子项(页面集合)上下文：{$implicit：root.children},并在每个子项中,通过更改上下文上下文来迭代根子项：{$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>

typescript – 使用angular2组件实现递归结构(没有forwardRef)？

猜你在找的Angularjs相关文章