0

我有一个与依赖注入有关的问题。我是 Angular 的新手，问题是，我试图将登录的用户数据存储在服务中，并在从 API 获取登录用户信息的应用程序组件中调用此服务。

当我尝试从/dashboard/*任何后代链接访问该服务时，该服务的数据可用。但是当我尝试从/dashboardI got访问这些数据时undefined。

我观察到的问题是，在 URL 发生变化之前，来自服务的数据不会被加载。当有导航时，数据会被加载。

该服务已在app.module.

app.module-

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { UserProfileService } from './services/profile/user-profile.service';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        DashboardModule,
        SharedModule,
        BrowserAnimationsModule,
        MobileScreenModule,
        AuthModule,
        JwtModule
    ],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
        UserProfileService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module-

const routes: Routes = [
    // {path: 'auth' , redirectTo:'/auth/login'},
    {
        path: 'auth', 
        loadChildren: ()=>  import('./auth/auth.module').then(child => child.AuthModule), 
        canActivate: [PreAuthGuardService]
    },
    {
        path: 'dashboard', 
        component: DashboardComponent,
        canActivate: [PostAuthGuardService],
        loadChildren: () => import('./dashboard/dashboard.module').then((childrens) => childrens.DashboardModule)
    },
    { path: '**', redirectTo: '/auth/login' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
4

1 回答 1

1

我建议您从提供者中删除 UserProfileService，但请确保您已providedIn: 'root'设置。还要确保您不在其他任何地方提供它。这将确保只有一个服务实例存在，因此数据应该可用。

此外，守卫不是服务（PostAuthGuardService），如果我是你，我会重命名它们。

于 2021-03-18T17:59:45.350 回答