Angular - 如何仅重新加载路由器出口而不是整个组件/模块答案

【问题标题】：Angular - How to reload only router-outlet and not entire component/moduleAngular - 如何仅重新加载路由器出口而不是整个组件/模块
【发布时间】：2023-01-11 18:07:23
【问题描述】：

我有一个 AppModule，它在成功验证后延迟加载 businessModule。这个子模块的入口组件有一个topbar、navbar和router-outlet；

问题：每当我单击一条路线时，它都会重新呈现整个模块，因此会调用 ngOnInit 对于 topbar、navbar 和 router-outlet 当前活动组件。

我正在尝试仅触发对路由器出口（子）的刷新；如何做呢？

== 业务组件 (entryComponent) =

<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 {}

=导航栏组件=

    <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}`]);
            });

【问题讨论】：

标签： angular

【解决方案1】：

我将 businessService 注入了仪表板组件，该组件在其构造函数中将 shouldReuseRoute 设置为 false。

this.router.routeReuseStrategy.shouldReuseRoute = () => false;

【讨论】：