Angular项目admin组件下新增页面标题位置异常如何修复？

AI 小北

2026-9-24

问题原因定位

路由出口放置位置错误：你项目中用于承接子路由内容的<router-outlet>没有放在admin.component.html的.home-section容器内部，而是放在了整个admin组件模板的最末尾，作为子路由渲染的currency页面内容会自然排列在侧边栏、头部导航的下方，最终展示在页面底部。
布局结构缺失预留区域：现有admin.component.html的.home-section容器仅包含顶部导航栏，没有预留子页面内容的渲染位置，子路由内容无法挂载到头部下方的预期区域。

修复方案

修改admin.component.html代码，在.home-section区域的</nav>结束标签之后添加<router-outlet>，让子路由内容直接渲染在头部导航下方，修改后代码如下：

<div class="sidebar">
  <div class="logo-details">
    <i class="bx bxl-c-plus-plus"></i>
    <span class="logo_name">Menu</span>
  </div>
  <ul class="nav-links">
    <li>
      <a routerLink="value" class="active">
        <i class="bx bx-grid-alt"></i>
        <span class="links_name">Value</span>
      </a>
    </li>
    <li>
      <a routerLink="currency">
        <i class="bx bx-box"></i>
        <span class="links_name">Currency</span>
      </a>
    </li>
  </ul>
</div>
<section class="home-section">
  <nav>
    <div class="sidebar-button">
      <i class="bx bx-menu sidebarBtn"></i>
      <span class="dashboard">Dashboard</span>
    </div>
    <div class="search-box">
      <input type="text" placeholder="Search..." />
      <i class="bx bx-search"></i>
    </div>
    <div class="profile-details">
      <span class="admin_name">Prem Shahi</span>
      <i class="bx bx-chevron-down"></i>
    </div>
  </nav>
  <!-- 新增router-outlet承接子路由内容 -->
  <router-outlet></router-outlet>
</section>