web-dev-qa-db-ja.com

Angular 4アプリケーションを初期化する前にデータをロードする

アプリケーションが起動する前に、いくつかのデータを読み込もうとしています。私がそれをする必要がある理由は、メニューのいくつかが、たとえばユーザーの場所に基づいて、いくつかのユーザー条件に基づいてアクセスを制限しているためです。

したがって、ユーザーがまだ場所を持っていない場合、またはその場所が特定のビューにアクセスするために有効になっていない場合は、それをブロックする必要があります。

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に置き換えようとしましたが、データが利用可能になった後はビューが有効にならず、空白のページにとどまります。

angularangular-routerangular-router-guards
6
celsomtrindade

いくつかのこと...

ページが読み込まれる前にデータをプリフェッチすることは、リゾルバーの優れた使用法です。

ルートへのアクセスを防止することは、CanActivateの優れた使用法です。

ただし、リゾルバはすべてのガードがチェックされた後にのみ機能することに注意してください。したがって、コードはリゾルバーを実行する前にCanActivateを実行しようとします。

enter image description here

10
DeborahK

アプリケーションが起動する前に、APP_INITIALIZERを使用してデータをロードできると思います。

この記事を確認してください：

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

4
M J

この質問 の回避策を見つけました。

canActivateを使用する方法を見つけました。私はすでに.map()を使用してObservableを返そうとしましたが、重要な点は最後の.first()であり、これで問題は解決しました。

Resolveを使用して同じ結果を達成する方法がある場合は、それがより良いかもしれないので、私はそれを開いたままにしておきます。

0
celsomtrindade