Angular项目初始加载时显示主菜单及菜单一的实现求助

我来帮你搞定这个需求！要实现页面加载时主菜单可见、第一个子菜单默认展开、第二个子菜单隐藏的效果，咱们只需要调整组件的初始化逻辑就行，不用动复杂的现有代码。

具体修改步骤 #

• 确保默认选中第一个子菜单：把selected属性直接初始化为0（对应第一个子菜单的索引），这样样式上能默认高亮第一个子菜单。
• 页面加载时主动触发子菜单显示：在ngOnInit生命周期里主动调用showSubMenu方法，传入第一个子菜单的数据，让主菜单组件能接收到并渲染对应的内容。

修改后的完整代码 #

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { SideMenu } from './side-menu.data';

@Component({
  selector: 'app-side-menu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.css']
})
export class SideMenuComponent implements OnInit {
  data = SideMenu.data.subOptions[0].children;
  // 初始化选中第一个子菜单的索引
  selected: number = 0;

  @Output() changeMainMenu = new EventEmitter<any>();

  constructor() { }

  ngOnInit() {
    // 页面加载完成后，主动触发第一个子菜单的显示逻辑
    this.showSubMenu(SideMenu.data.subOptions[0], this.selected);
  }

  showSubMenu(item: {}, i: number) {
    console.log(item['children']);
    this.selected = i;
    this.changeMainMenu.emit(item['children']);
  }
}

逻辑说明 #

• ngOnInit是Angular组件初始化完成后的钩子，在这里调用showSubMenu能保证页面一加载就把第一个子菜单的children数据发送给主菜单组件，让主菜单渲染对应的内容。
• selected初始化为0，和模板里的选中状态绑定（比如[class.active]="selected === i"），能让第一个子菜单默认处于选中/展开的视觉状态，和功能逻辑保持一致。

如果你的模板里是用*ngIf或者其他方式控制子菜单的显示隐藏，这个初始化逻辑也能完美适配，保证第二个子菜单默认隐藏。

内容的提问来源于stack exchange，提问作者Ana_30