Angular2路由配置问题：登录页面意外显示侧边导航菜单

Hey there! Let's troubleshoot why that unwanted sidebar menu is showing up on your login page. Based on the files you mentioned, these are the key areas to check and fix:

This is the most likely culprit—your sidebar is probably being rendered unconditionally in the root component. You need to add a check to hide it when the user is on the login route.

First, update your template to conditionally render the sidebar:

<!-- App.component.html -->
<!-- Only show sidebar if we're NOT on the login page -->
<app-sidebar *ngIf="!isOnLoginPage"></app-sidebar>

<!-- Your router outlet where page content loads -->
<router-outlet></router-outlet>

Then, in your AppComponent class, use Angular's Router to detect the current route and update the flag:

// App.component.ts (make sure to import Router and NavigationEnd)
import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isOnLoginPage = false;

  constructor(private router: Router) {
    // Listen for route changes to update the login page flag
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      // Replace '/login' with your actual login route path
      this.isOnLoginPage = event.url === '/login';
    });
  }
}

If your login route is nested inside a parent route that includes the sidebar layout, it will inherit that layout. Make sure your login route is a top-level, standalone entry.

Here's a correct routing example:

// App.module.ts (or your dedicated routing module)
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { LayoutComponent } from './layout/layout.component'; // Your sidebar-containing layout
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  // Standalone login route—no sidebar layout
  { path: 'login', component: LoginComponent },
  
  // Routes that need the sidebar are nested under the layout component
  {
    path: '',
    component: LayoutComponent,
    children: [
      { path: 'dashboard', component: DashboardComponent },
      // Add other routes that should show the sidebar here
    ]
  },
  { path: '**', redirectTo: '/login' } // Catch-all redirect
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

While less likely, make sure you haven't accidentally added the sidebar component to your login template (e.g., <app-sidebar> in login.component.html) or included any logic in Login.component.ts that renders the sidebar dynamically.

9 times out of 10, the issue is either missing conditional rendering in the root component or incorrect routing nesting. Start with those two fixes, and your login page should hide the sidebar as expected!

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