如何将 Angular 服务包含在延迟加载的独立组件路由中？

Question

我有一个使用独立组件的 Angular 17 应用程序，初始路由的设置如下

app.routes.ts

export const appRoutes: Array<Route> = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  {
    path: 'login',
    component: LoginComponent,
    title: 'Login',
  },
  {
    path: '',
    canActivateChild: [AuthGuard],
    loadChildren: () => import(`./app-authorized.routes`).then((r) => r.appAuthorizedRoutes),
  },
  { path: '**', redirectTo: '/dashboard' },
];

用户登录后，他们将被授权并重定向到

/dashboard

，并且

app-authorized.routes.ts

路由将被加载。该文件如下所示：

export const appAuthorizedRoutes: Array<Route> = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard],
    title: 'Dashboard',
  },
  {
    path: 'settings',
    component: SettingsComponent,
    canActivate: [AuthGuard],
    title: 'Settings',
  },
  //etc...
];

我有几个服务只能在用户登录后使用，但目前在检查 Angular 加载的分块文件时，所有服务最初都会在登录页面加载。当然这是有道理的，因为它们装饰有

@Injectable({
  providedIn: 'root',
})

模块当然会让这变得容易，但由于我没有使用模块，我如何告诉我的应用程序仅包含某些服务以及延迟加载的路由，或者在用户登录后以任何方式包含？

Answer 1

您需要删除

providedIn: 'root'

，您有两个选择。

1. 创建一个模块

   RootModule

   ，其中包含

   dashboard

   的路由和设置，然后您需要在该模块的providers数组中添加服务（例如：TestService）！

2. 创建根组件或仅在仪表板和设置组件中创建。将服务包含在提供者数组中。请注意，服务实例只能在仪表板组件及其相关子组件上访问！

长话短说，如果您不希望在初始登录期间加载服务 -> 将其添加到模块或组件（最好是根组件！）的提供者数组中