Angular 菜单。无法将数据传递给子菜单二

Question

我有一个主菜单、子菜单一和子菜单二。

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

当我点击子菜单一项目时，我希望显示子菜单二。目前我不能这样做。

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

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

当我点击子菜单一中的项目时，我希望显示相关的子菜单二。

Answer 1

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

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

Answer 2

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

直接访问-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>

直接访问-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;
  }
}

子菜单-two.component.ts

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

  ngOnInit() {}
}

子菜单二-component.html

*ngFor="let item of menuItemsTwo"

子菜单一.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>

如果您需要任何帮助，请告诉我。

Angular 菜单。无法将数据传递给子菜单二

Angular Menu. Unable to pass data to sub-menu-two

typescript

angular

angular8