Angular中如何实现仅刷新应用内容，而非重新加载整个组件

Hey there! This is exactly what Angular's built-in Router is designed for—single-page navigation that swaps out only the content area without reloading the entire page. Here's how to implement it step by step:

Step 1: Set Up Angular Router (if not already done) #

First, ensure you have the Router module configured in your app. If you generated your app with routing (using ng new my-app --routing), you're halfway there. If not, add it to your AppModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

// Import your page components (e.g., HomeComponent, AboutComponent)
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { AppComponent } from './app.component';

// Define your routes
const routes: Routes = [
  { path: '', component: HomeComponent }, // Default route
  { path: 'about', component: AboutComponent },
  // Add more routes for your pages here
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes) // Initialize router with your routes
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 2: Structure Your app.component.html #

Keep your sidebar outside the <router-outlet> (this is the key part—since it's outside, it won't reload when navigating). Use routerLink for menu items instead of regular <a href> tags, and routerLinkActive to highlight the active menu item:

<!-- Sidebar Menu (stays persistent) -->
<div class="sidebar">
  <h2>My App</h2>
  <nav>
    <!-- Use routerLink instead of href to avoid page reload -->
    <a routerLink="" routerLinkActive="active-link">Home</a>
    <a routerLink="about" routerLinkActive="active-link">About</a>
    <!-- Add more menu items here -->
  </nav>
</div>

<!-- Content Area (only this part reloads) -->
<div class="content">
  <!-- Router outlet renders the active page component -->
  <router-outlet></router-outlet>
</div>

Step 3: Style the Active Menu Item #

Add CSS to your app.component.css to make the active link stand out:

.sidebar nav a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

/* This class is added automatically by routerLinkActive when the route matches */
.sidebar nav a.active-link {
  background-color: #007bff;
  color: white;
  font-weight: bold;
}

How This Works #

• No Page Reload: routerLink tells Angular to handle navigation internally, so the browser doesn't request a new page from the server. Only the component inside <router-outlet> gets replaced.
• Active Menu Highlight: routerLinkActive automatically adds the specified CSS class (active-link in our example) to the menu item whose route matches the current URL. This stays in sync without any extra code.

This setup will eliminate the visual lag of full page reloads and keep your sidebar menu's active state perfectly in sync with the current page.

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