Angular router-outlet问题：点击链接后Home文本消失如何修复？

Alright, let's get to the bottom of why your Home text disappears when you click the History link. The core issue is your current route structure—home and history are set up as sibling routes under the Shell. That means when you navigate to /history, the Angular router replaces the entire Home component with the History component, hence the Home text vanishing.

To render History below the Home text (inside Home's router-outlet), you need to set up nested routes where history is a child of the home route. Here's how to adjust your code:

Step 1: Update the Route Configuration #

Modify your home-routing.module.ts to make history a child route of home:

const routes: Routes = [
  Shell.childRoutes([
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { 
      path: 'home', 
      component: HomeComponent, 
      data: { title: extract('Home') },
      // Add History as a child route of Home
      children: [
        { path: 'history', component: HistoryComponent, data: { title: extract('History Logs') } }
      ]
    }
  ])
];

Step 2: Adjust the Router Link #

Change the routerLink in home.component.html to use a relative path (instead of an absolute path starting with /). This tells the router to look for the history route as a child of the current home route:

<h1>Home</h1>
<!-- Use relative path for the child route -->
<a routerLink="history">History</a>
<div>
  <router-outlet></router-outlet>
</div>

Why This Works #

Now when you click the History link, your route will become /home/history. The Angular router will:

1. Keep rendering the Home component (so the <h1>Home</h1> stays visible)
2. Load the History component into the router-outlet inside Home, right below the link.

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