如何在 Angular 中仅加载特定部分而不刷新菜单组件？

Question

我有一个角度应用程序，在应用程序组件中包含以下代码

<div class="app-container">
  <app-header *ngIf="router.url !== '/'" class="topbar"></app-header>
  <mat-drawer-container class="body-container">
    <mat-drawer mode="side" opened *ngIf="router.url !== '/'" class="side-bar">
      <app-sidebar></app-sidebar>
    </mat-drawer>

    <mat-drawer-content class="main-container">
      <router-outlet></router-outlet>
    </mat-drawer-content>
  </mat-drawer-container>
</div>

我的路由器文件如下

const routes: Routes = [
  { path: '', component: LoginComponent },
  {
    path: 'user',
    component: UserComponent,
    canActivate: [AuthGuard],
  },
  { path: 'student', component: StudentComponent, canActivate: [AuthGuard] },
];

在左侧栏中，我有一个导航到不同组件的按钮，一切都很好，但加载主要内容时左侧窗格也会刷新。我应该怎么做才能解决这个问题？

Answer 1

我弄清楚了，下面是修改后的代码。希望它能帮助别人

<app-header *ngIf="router.url !== '/'" class="topbar"></app-header>

<mat-sidenav-container class="main-container">
  <mat-sidenav
    #sidenav
    mode="side"
    opened
    class="sidenav"
    [fixedInViewport]="false"
    [fixedTopGap]="0"
    [fixedBottomGap]="0"
  >
    <app-sidebar></app-sidebar>
  </mat-sidenav>

  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>