Angular如何仅刷新router-outlet而非整个组件/模块

我有一个AppModule，认证成功后会懒加载BusinessModule。这个子模块的入口组件包含topbar、navbar和router-outlet。现在的问题是每次点击路由时，整个模块都会重新渲染，导致topbar、navbar以及router-outlet当前激活组件的ngOnInit都被调用。我希望只触发router-outlet里的子组件刷新，该怎么实现？

Business Component（入口组件） #

<div class="viewport businessMainGrid" style="overflow: auto;">
    <ng-container *ngIf="admin$ | async" class="fullspan">
        <h3 class="adminBack">
            <button (click)="toBizSide()">BACK TO ADMIN</button>
        </h3>
    </ng-container>

    <header>
        <app-topbar class="w-100 topbar"></app-topbar>
    </header>

    <nav>
        <app-navigation></app-navigation>
    </nav>

    <main>
        <span class="chatArea">
            <app-chat-bubble></app-chat-bubble>
        </span>
        <router-outlet></router-outlet>
    </main>
</div>

子模块RouterModule #

const routes: Routes = [
    {
        path: '',
        component: BusinessComponent,

        children: [
            {
                path: 'chat',
                data: { name: 'chat' },
                canActivate: [BusinessModuleAccessGuard],
                loadChildren: () =>
                    import('../Chat/chat.module').then((m) => m.ChatModule),
            },
            {
                path: 'social',
                data: { name: 'social' },
                canActivate: [BusinessModuleAccessGuard],
                loadChildren: () =>
                    import('../Social/social.module').then(
                        (m) => m.SocialModule
                    ),
            },
            {
                path: 'dashboard',
                loadComponent: () =>
                    import('./Dashboard/business-dashboard.component').then(
                        (m) => m.BusinessDashboardComponent
                    ),
            },
            {
                path: 'profile',
                component: ProfileComponent,
            },
            {
                path: '**',
                redirectTo: 'dashboard',
            },
        ],
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
    providers: [BusinessModuleAccessGuard],
})
export class BusinessRoutingModule {}

Navbar Component #

<ng-container *ngFor="let sidebarnavItem of sidebarnavItems">
    <li class="mb-3" (click)="addActiveClass(sidebarnavItem.title)"
        [routerLink]="sidebarnavItem.path !== '' ? [sidebarnavItem.path] : null">

        <a class="sidebar-link waves-effect waves-dark">
            <i [style.display]="'block'"><img class="icon" [src]="sidebarnavItem.icon" alt="settings"></i>
        </a>

        <h3 class="m-0 mini-title ">{{sidebarnavItem.title}}</h3>
    </li>
</ng-container>

期望效果 #

我试过这种路由跳转方式，但没效果：

let url = this.router.url;
        
this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
    this.router.navigate([`/${url}`]);
});

解决方案 #

核心原因 #

问题本质是BusinessComponent作为父路由组件被重复实例化，正常情况下父组件应该只初始化一次，子路由切换不会触发它的重建。常见触发点有三个：路由跳转路径错误、父路由配置问题、Observable频繁触发变更检测。

具体修复步骤 #

1. 修正Navbar的路由跳转路径
   确保routerLink使用相对路径，避免触发父路由的重建。如果sidebarnavItems的path已经是子路由（如'chat'、'social'），当前代码没问题；如果是绝对路径，改成相对路径：

   [routerLink]="sidebarnavItem.path !== '' ? ['./' + sidebarnavItem.path] : null"
   

2. 检查父路由配置
   确保AppModule中懒加载BusinessModule的路由配置正确，父路由路径独立，不会被子路由触发重置：

   // AppModule路由示例
   const routes: Routes = [
     // 其他路由
     {
       path: 'business',
       loadChildren: () => import('./business/business.module').then(m => m.BusinessModule)
     }
   ];
   

3. 稳定admin$ Observable
   如果admin$频繁发射值，会触发*ngIf重新渲染整个容器。用distinctUntilChanged()确保只有值变化时才更新：

   // 在BusinessComponent中修改
   import { distinctUntilChanged } from 'rxjs/operators';
   
   admin$ = this.yourAdminService.admin$.pipe(distinctUntilChanged());
   

4. 放弃错误的路由跳转方式
   你之前尝试的先跳根路由再返回的方式会重置路由栈，反而触发父组件重建，直接丢弃即可。

验证方法 #

在BusinessComponent、TopbarComponent、NavbarComponent的ngOnInit中添加console.log，切换子路由后，若父组件的日志只出现一次，子组件日志每次切换都出现，说明修复生效。

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