每次路由更改时，Angular Router 都会重新加载所有内容

Question

我参与过许多 Angular 项目，但从未见过这样的问题。我正在使用 Angular 版本 16。

这是我的路线：

export const routing = [
  {
    path: '',
    component: AppComponent,
    canActivate: [() => inject(CoreGuard).canActivate()],
    canActivateChild: [(snapshot: ActivatedRouteSnapshot, state: RouterStateSnapshot) => inject(AccountGuard).canActivateChild(snapshot, state)],
    children: [
      {
        path: 'home',
        component: HomeComponent,
        title: 'Home',
      },
      {
        path: 'permission',
        component: PermissionComponent,
        title: 'Permission',
      },

      // Chat
      {
        path: 'chat',
        loadChildren: () => import('../module/chat/chat.module').then(m => m.ChatModule),
      },

      // Apps
      {
        path: 'apps',
        children: [
          {
            path: 'engine',
            loadChildren: () => import('../module/apps/engine/engine.module').then(m => m.EngineModule),
          }
        ],
      },

      // Catalog
      {
        path: 'catalog',
        children: [
          {
            path: 'tag',
            loadChildren: () => import('../module/catalog/tag/tag.module').then(m => m.TagModule),
          },
          {
            path: 'product',
            loadChildren: () => import('../module/catalog/product/product.module').then(m => m.ProductModule),
          },
        ],
      },

      // Store
      {
        path: 'store',
        children: [
          {
            path: 'config',
            loadChildren: () => import('../module/store/config/config.module').then(m => m.ConfigModule),
          },
          {
            path: 'page',
            loadChildren: () => import('../module/store/page/page.module').then(m => m.PageModule),
          },
        ],
      },

      // Coming Soon
      {
        path: '**',
        component: ComingSoonComponent,
      }
    ]
  }
];

基本上发生的事情是，每次我访问任何现有路由时，我都可以看到主应用程序闪烁并且数据正在再次加载。

例如，我在文件

console.log()

上有一个

AppComponent->Constructor()

，每次有导航时都会记录，无论它是什么导航。另外，如果我有一个也有子级的子模块路由，则父级将被执行多次。

例如：

export const chatRouting: Routes = [
  {
    path: '',
    component: ChatListComponent,
    children: [
      {
        path: '',
        component: ChatEmptyComponent,
      },
      {
        path: ':id',
        component: ChatEmptyComponent,
      },
    ]
  },
];

上面的路由是

ChatModule

路由，其中组件

ChatListComponent

将加载所有存在的聊天实例，然后导航到特定的聊天以在

ChatListComponent

中打开。

但是，对于每次导航到聊天实例，它不仅会加载整个应用程序路由，还会再次调用

ChatListComponent

中的 api。

我不知道这里发生了什么。我已经这样做了很多次了，从来没有遇到过这个问题。

Answer 1

你的路线如何？您是否更改地址栏中的 URL 或使用路由器类或如何更改？您尝试以什么方式导航路线？