Angular 应用组件之前的角度组件加载

我在应用程序组件中注入userService，因为我不希望在我的应用程序中的每个组件中都注入userService时服务为空。 所以，我想做的是加载app.component和登录用户，然后加载我的组件。 实际情况是，组件在app.component之前加载，而我的用户未定义

如何首先加载应用程序组件

此外，我还有app.module和其他两个模块core.module和shared.module

export class AppComponent implements OnInit {

  @HostListener("window:beforeunload",["$event"])
  loading = true;

  constructor(public  router: Router,
              public  userService: UserService,
              private accountService: AccountService,
              private toastr: ToastrService
  ) { }

  ngOnInit() {
    StorageHelper.getToken()
      ? this.getUserDetails()
      : this.loading = false;
  }

  getUserDetails() {
    this.accountService.getUserDetails().subscribe(res => {
      this.userService.setCurrentUser(<User>res);
      this.loading = false;
    }, error => {
      StorageHelper.killSession();
      this.toastr.error('login error');
      this.loading = false;
      this.router.navigate([Urls.LOGIN]);
    });
  }

---

您的问题不是在实例化userService时出现的。这是您希望第一次访问用户详细信息的方式

因为this.accountService.getUserDetails（）是可观察的，即使userService是实例化的this.userService.setCurrentUser（res）；将被称为后者

要解决此问题，您可以使用各种方法： -您可以使用routerguard并仅在完成此.accountService.getUserDetails（）之后加载组件

文件：

例：

@Injectable（）
导出类AuthGuard实现了CanActivate{
建造商（私人账户服务：账户服务、，
私有用户服务：用户服务，
专用路由器（路由器）{
}
canActivate（下一个：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察{
返回此.accountService.getUserDetails（）.pipe（映射（res=>{
this.userService.setCurrentUser（res）；
返回true；
})，catchError（（）=>{
this.router.navigate（['/login']）；
归还（假）；
}));
}
}

您的问题不在实例化userService时。这是您希望第一次访问用户详细信息的方式

因为this.accountService.getUserDetails（）是可观察的，即使userService是实例化的this.userService.setCurrentUser（res）；将被称为后者

要解决此问题，您可以使用各种方法： -您可以使用routerguard并仅在完成此.accountService.getUserDetails（）之后加载组件

文件：

例：

@Injectable（）
导出类AuthGuard实现了CanActivate{
建造商（私人账户服务：账户服务、，
私有用户服务：用户服务，
专用路由器（路由器）{
}
canActivate（下一个：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察{
返回此.accountService.getUserDetails（）.pipe（映射（res=>{
this.userService.setCurrentUser（res）；
返回true；
})，catchError（（）=>{
this.router.navigate（['/login']）；
归还（假）；
}));
}
}

我建议您查看预取组件数据：

---

正如上面评论中所说的，你们的问题不在于在应用之前加载服务。但是，如果您想在渲染任何其他组件之前解析数据，预取将帮助您。

我建议您查看预取组件数据：

正如上面评论中所说的，你们的问题不在于在应用之前加载服务。但是，如果您想在呈现任何其他组件之前解析数据，预取将帮助您

export class MyComponent implements OnInit {
constructor(private userService: UserService,
private myService: MyService) {}

ngOnInit() {
this.getPolicies();
}

getPolicies() {
this.myService.getPolicies(this.userService.getCurrentUser().id).subscribe(res => {
....
})
)

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private accountService: AccountService,
              private userService: UserService,
              private router: Router) {
  }

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>  {
    return this.accountService.getUserDetails().pipe(map(res => {
      this.userService.setCurrentUser(res);
      return true;
    }), catchError(() => {
      this.router.navigate(['/login']);
      return of(false);
    }));
  }
}