angular 15 当路由器离开惰性模块时，最后一个组件仍然可见

Question

我有一个角度为 15 的应用程序，它显示出非常奇怪的行为。

我有一个延迟加载的模块，其中包含名为 records 的路由。
如果我导航到这个“记录”模块内的任何路线，然后尝试加载任何路线outside该模块，“记录”模块中最后加载的组件仍然可见。

这是我的路线定义：

export const APP_ROUTES: Routes = [
  { path: 'home', pathMatch: 'full', component: HomeComponent },
  { path: 'login', pathMatch: 'full', redirectTo: '/user/login' },
  {
    path: 'user',
    loadChildren: () =>
    import('@t3/training-tracker-web/feature-user').then(
      (m) => m.FEATURE_USER_ROUTES
      ),
  },
  {
    path: 'records',
    loadChildren: () =>
      import('@t3/training-tracker-web/feature-personal-records').then(
        (m) => m.PersonalRecordsRoutes
      ),
  },
  { path: '', pathMatch: 'full', component: HomeComponent },
  { path: '**', component: PageNotFoundComponent },
];

这里是我的惰性模块路由的定义：

export const RecordsRoutes: Route[] = [
  { path: 'add-record', component: RecordsAddComponent },
  { path: 'record-list', component: RecordsListComponent },
  { path: 'record-detail', component: RecordsDetailComponent },
  { path: '', component: FeatureRecordsComponent },
];

我在我的组件中使用 routerlink 指令来像这样导航：

   <button mat-menu-item [routerLink]="'/records'">All Records</button>
   <button mat-menu-item [routerLink]="'/records/add-record'">Add Record</button>

这是真正奇怪的事情。我的菜单中有一个切换开关，可触发 dom 中明暗模式的变化。它改变了 body 元素上的一个类。如果我切换主题，不应该显示的组件就会消失。 就像记录模块中的某些东西在导航离开后阻止视图更新。

此外，我还有另一个惰性加载模块“users”，它不显示此行为。我的问题特定于“记录”模块。

编辑 1

所以我能够缩小问题的范围。我正在为我的延迟加载路线使用 NX 库，并且我正在使用独立组件。我在另一个库中有一个共享的 UI 模块，任何导入此共享 ui 模块的组件都会出现我上面描述的错误，即从该组件路由时不会被卸载。

我还没有解决方案，但我更接近于弄清楚了。

这是我的共享模块 def:

@NgModule({
  imports: [
    CommonModule,
    MaterialModule,
    ReactiveFormsModule,
    RouterLinkWithHref,
    HttpClientModule,
    AngularSvgIconModule.forRoot(),
  ],
  declarations: [PrimaryContentCardComponent, AppShellComponent],
  providers: [provideAnimations()],
  exports: [PrimaryContentCardComponent, MaterialModule, AppShellComponent],
})
export class SharedUiModule {}

编辑 2

这是我在根角度应用程序中使用 app-shell 组件的应用程序组件：

<t3-app-shell
  [darkTheme]="darkTheme$ | async"
  class="app-content-wrapper"
  (signOutEvent)="signOutEvent()"
  (toggleThemeEvent)="toggleThemeEvent(false)"
>
  <router-outlet></router-outlet>
</t3-app-shell>

我将 app-shell 组件提取到它自己的独立组件中，但问题仍然存在

有人能帮我弄清楚为什么这些组件在离开它们后没有从 dom 中删除

Answer 1

问题是在此应用程序中混合模块和独立组件。我正在尝试独立迁移并从延迟加载的路由/组件开始。

问题是将 sharedUI 模块导入到我所有的独立组件中。我删除了共享 UI 模块导入，只将需要的特定内容导入到每个独立组件中。

一旦我这样做了，路由就正常工作了。