在初始化应用程序之前,Angular 4加载数据

Question

我正在尝试在应用程序启动之前加载一些数据.我需要这样做的原因是因为某些菜单基于某些用户条件限制了访问,例如,基于用户位置.

因此,如果用户还没有位置或者它的位置未能访问某些视图,我需要阻止它.

---

我尝试使用Angular Resolve方法,但没有成功,这就是我所做的:

解决警卫

// The apiService is my own service to make http calls to the server.
@Injectable()
export class AppResolveGuard implements Resolve<any> {
    constructor(
        private _api: ApiService,
        private _store: Store<IStoreInterface>,
    ) { }

    resolve(): any {
        return this._api.apiGet('loadData').subscribe(response => {
            this._store.dispatch({
                type: USER_FETCH_DATA,
                payload: response.usuario
            });

            return response;
        });
    }
}

路由

export const routing = [
    {
        path: '', component: AppComponent, canActivateChild: [AuthGuard], resolve: {app: AppResolveGuard},
        children: [
            { path: 'home', component: HomeComponent },
            { path: 'company', canActivate: [LocationGuard], component: CompanyComponent },
        ]
    }
];

AuthGuard只是要检查有效的cookie会话.

如您所见,我试图阻止访问的company路由是路由.当我第一次加载另一个页面时,我能够阻止访问,例如,如果第一次访问页面home然后我导航到页面company验证工作正常,因为用户数据和位置已经可用.

但是,如果第一次访问页面company,它将阻止所有用户在那里导航,因为在LocationGuard尝试验证用户位置时,数据尚未可用.

我也试图取代Resolve有CanActivate,但它永远不会让视图后的数据是avaliable,它一直是一个空白页上.

Answer 1

一些东西 ...

在页面加载之前预取数据是解析器的一个很好用途.

阻止访问路线是CanActivate的一个重要用途.

但请注意,解析器仅在检查所有防护装置后才能工作.因此,在运行解析程序之前,您的代码将尝试运行CanActivate .

Answer 2

我认为您可以使用APP_INITIALIZER在应用程序启动之前加载数据。

检查这篇文章：

https://devblog.dymel.pl/2017/10/17/angular-preload/

Answer 3

我找到了这个问题的解决方法。

我找到了一种使用方法canActivate。我已经尝试使用.map()return an Observable，但关键点是.first()最后，这解决了问题。

不过，我会保持打开状态，因为如果有一种方法可以使用 实现相同的结果Resolve，也许会更好。