Question

我有一个主菜单，一个子菜单和两个子菜单。

当我单击主菜单项时，将显示子菜单一。

当我单击子菜单一项时，我希望显示子菜单二。目前，我无法执行此操作。

我终于设法使主菜单和子菜单一正常工作，但是我不知道如何集成子菜单二。

https://stackblitz.com/edit/angular-o9an35

当我单击子菜单一中的一个项目时，我想要显示相关的子菜单二。

Answer 1

您必须在子菜单二中添加相同的输入和输出

https://stackblitz.com/edit/angular-pmyw2q

Answer 2

请检查更新的网址-现在可以使用-https://stackblitz.com/edit/angular-o9an35

direct-access-page.component.html

<app-main-menu 
  (changeMainMenu)="changeMainMenu($event)" 
  style="float: left; width: 150px;">
</app-main-menu>
<app-sub-menu-one 
  [menuItems]="mainMenuChildren" 
  (changeSubMenuOne)="changeSubMenuOne($event)"  
  style="float: left; width: 150px;">
</app-sub-menu-one>
<app-sub-menu-two  
  [menuItemsTwo]="subMenuTwoChildren"
  style="float: left; width: 150px;">
</app-sub-menu-two>
</div>

direct-access-page.component.ts

export class DirectAccessPageComponent implements OnInit {
  //@Input() mainMenuIndex = new EventEmitter()
  public mainMenuChildren: [{}];
  public subMenuTwoChildren: [{}];
  constructor() {}

  ngOnInit() {}

  changeMainMenu(children: [{}]) {
    console.log('changeMainMenu', children);
    this.mainMenuChildren = children;
  }

  changeSubMenuOne(children: [{}]) {
    console.log('changeSubMenuOne', children);
    this.subMenuTwoChildren = children;
  }
}

sub-menu-two.component.ts

export class SubMenuTwoComponent implements OnInit {
  @Input() menuItemsTwo: [{}];
  constructor() {}

  ngOnInit() {}
}

sub-menu-two-component.html

*ngFor="let item of menuItemsTwo"

sub-menu-one.component.html

<div  
    class="ax_default t-menu" 
    *ngFor="let item of menuItems" 
    (click)="showSubMenuTwo(item)"
    style="border: 1px green solid">
    <div >
      <p>
        <span>{{ item["name"] }}</span>
      </p>
    </div>
  </div>

让我知道您是否需要任何帮助。

角度菜单。无法将数据传递到子菜单2

2 个答案: