角 |如何在应用程序解析之前初始加载数据？

Question

我正在使用 Angular 编写一个 Web 应用程序。

每次用户导航到该站点时，该应用都必须在准备好应用之前执行几次服务器调用。

我试图定义一个必须在 Routes 中解析的函数：

{path: '', resolve: {data: AppService}, children: [
   {path: 'home', component: HomeComponent},,
   {path: 'faq', component: FaqComponent},
   {path: 'about', component: AboutComponent},
   {path: 'contact', component: ContactComponent},
]}

在 AppServices 中我有以下功能：

  resolve(): Promise<any> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('RESOLVING');
        resolve();
      }, 5000);

    })
  }

这不起作用：在调用resolve 之前显示用户导航到的页面。

问题：如何定义在应用准备好之前必须解析的函数？无论用户导航到/ 或/foo /foo/bar，都必须调用此函数，并且只能在用户第一次导航到应用程序时调用。

Answer 1

添加到应用提供商：

{
        provide: APP_INITIALIZER,
        useFactory: startupServiceFactory,
        deps: [ Session ],
        multi: true,
    },

地点：

export function startupServiceFactory(startupService: Session): Function {
    return () => startupService.initialize();
}

将 startupService.initialize() 替换为您的方法。 deps 包含您的服务所具有的任何依赖项，可以省略。

示例：

 async initialize(): Promise<any> {
        try {
            if (!environment.production) {
                this.user = await this.service.init();
                this.role = this.user.role;
                this.lang = this.user.lang;
                this.translate.use(this.user.lang);
                this.registerLocale();
                this.navigate();
                return;
            }
            this.router.navigateByUrl('/');
        } catch (err) {}
    }

Answer 2

您可以使用 canActivate gurard，它可以在路由上返回布尔值的 Observable。

import { Injectable } from '@angular/core';
import { CanActivate, Router }    from '@angular/router';
import { Observable } from 'rxjs/Observable';

    @Injectable()
    export class AuthGuard implements CanActivate {
      constructor(private router: Router) { }

      canActivate(): Observable<boolean> {
            //Ajax call and other logic
            return Observable.of(true)
      }
    }



{path: '', canActivate: [AuthGuard], children: [
   {path: 'home', component: HomeComponent},,
   {path: 'faq', component: FaqComponent},
   {path: 'about', component: AboutComponent},
   {path: 'contact', component: ContactComponent},
]}