如何在Angular 4项目的登录页面中隐藏导航侧边栏？

嘿，我刚梳理了你的问题，核心是路由结构设计不对，导致导航栏和页面的显示逻辑混乱了。咱们一步步调整就能解决：

第一步：重构App组件的模板 #

你的app.component.html现在直接硬编码了导航栏和登录页，这会导致它们永远同时显示。咱们改成只放路由出口，让路由来决定当前显示什么内容：

<router-outlet></router-outlet>

第二步：调整路由配置（关键！） #

现在把路由分成两类：不需要导航栏的独立页面（比如登录页）和需要嵌入导航栏的页面（比如产品页）。用嵌套路由实现后者，把产品页作为导航栏组件的子路由：

const appRoutes: Routes = [
  // 默认访问根路径时跳转到登录页
  { path:'', redirectTo:'/loginpage', pathMatch:'full' },
  // 独立登录页路由（无导航栏）
  { path:'loginpage', component: LoginpageComponent },
  // 父路由：加载导航栏，子路由内容会渲染在导航栏内部的router-outlet里
  { 
    path:'admin', 
    component: NavbarComponent,
    children: [
      { path:'product', component: ProductComponent },
      // 后续新增的需要导航栏的页面，都可以放在这个children数组里
      // { path:'order', component: OrderComponent }
    ]
  },
  // 可选：404页面跳转
  { path:'**', redirectTo:'/loginpage' }
];

第三步：修改登录页的跳转链接 #

之前的跳转路径要改成嵌套路由的完整路径，这样登录后会直接跳转到带导航栏的产品页：

<a routerLink="/admin/product" routerLinkActive="active">
  <button id="Enter" class="btn btn-primary btn-block btn-flat fa fa-sign-in"> Log-In</button>
</a>

第四步：保持导航栏组件不变 #

你的navbar.component.html已经正确放置了<router-outlet>，这个不用修改，它会自动渲染父路由admin下的子组件（比如ProductComponent）。

为什么这样能解决问题？ #

• 访问/loginpage时，路由直接渲染LoginpageComponent，不会加载导航栏，完美满足登录页隐藏导航的需求。
• 访问/admin/product时，路由先渲染NavbarComponent，然后在它内部的<router-outlet>里渲染ProductComponent，实现了内容页嵌入导航栏的效果。

可选优化：路由守卫（防止未登录访问admin页面） #

如果想确保只有登录后的用户才能访问/admin下的页面，可以添加Angular的路由守卫（AuthGuard），不过这是进阶功能，先把当前的显示问题解决了再说～

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