angular - 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但在数据可用后它永远不会启用视图，它停留在空白页面上。

score 12 · Accepted Answer

一些东西 ...

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

阻止对路由的访问是 CanActivate 的一个很好的用途。

但是请注意，解析器仅在检查所有防护之后才起作用。因此，您的代码将在运行解析器之前尝试运行 CanActivate 。

score 5 · Accepted Answer

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

检查这篇文章：

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

score 0 · Accepted Answer

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

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

我会保持打开状态，因为如果有办法使用实现相同的结果Resolve，也许它会更好。

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

3 回答 3

Related

Reference