Question

我试图绑定到ngFor循环内的子组件的输入属性以创建菜单结构。 我无法在搜索中找到任何帮助，所以我发布了这个问题。

我将菜单结构存储在侧边栏组件的代码中，作为 MenuItemComponents 的数组 - ＆gt;的 MenuStructure

sidebar.component.ts：（父组件）

export class SidebarComponent implements AfterViewInit {

  MenuStructure: MenuItemComponent[] = [];

  ngAfterViewInit() {
    //Define and Add Dashboard
      var dashboard = new MenuItemComponent(null);
      dashboard.title = 'Dashboard';
      dashboard.iconName = 'dashboard';

    //Define Documentation
      var documentation = new MenuItemComponent(null);
      documentation.title = 'Documentation';
      documentation.iconName = 'insert drive file';

    this.MenuStructure.push(dashboard);
    this.MenuStructure.push(documentation);
  }
}

这是子组件（也就是菜单的构建块）：

菜单-item.component.ts：

@Component({
  selector: 'app-menu-item',
  templateUrl: './menu-item.component.html',
  styleUrls: ['./menu-item.component.css']
})
export class MenuItemComponent implements OnInit {
  @Input() iconName: string;
  @Input() title: string;
  @Input() children: MenuItemComponent[] = [];
  @Input() routeLink: string = '';

  constructor(private parent: MenuItemComponent) { }

菜单-item.component.html：

<a><i class="material-icons">{{iconName}}</i><span>{{title}}</span>
    <i class="material-icons" >&#xE313;</i> 
</a>

以上模板用于侧栏模板中的ngFor循环...

sidebar.component.html：

  <ul>
    <li *ngFor="let item of MenuStructure">
        <app-menu-item [title]='item.title' [iconName]='item.iconName'>
        </app-menu-item>
    </li>
  </ul>

但是，在尝试实现此功能时，我收到以下模板错误：

Template parse errors:
Cannot instantiate cyclic dependency! MenuItemComponent ("<ul>
        <li *ngFor="let item of MenuStructure">
            [ERROR ->]<app-menu-item [title]='item.title' [iconName]='item.iconName'>
            </app-menu-item>
      "): SidebarComponent@9:12

任何人都可以解释为什么抱怨/修复，和/或更好的方法在角度2中做到这一点？

Answer 1

正如Amit所指出的，我得到的错误是通过将private parent: MenuItemComponent传递给MenuItemComponent构造函数（它自己的构造函数）而生成的。

我错误地认为依赖注入器会为它创建一个不同的引用/实例并停在那里，但事实证明它创建了一个无限循环。

在这个阶段，我仍然没有找到更好的解决方案，如何使用组件/子组件实现带角度2的子菜单，所以任何有更好解决方案的人都欢迎添加答案，但是这个答案直接解决错误。

在ngFor

1 个答案: