Как я могу получить значение ActivatedRoute в Ionic 4?

Question

У меня есть две страницы, требующие аутентификации, поэтому я создал AuthGuard, который будет перенаправлять на форму входа в систему, когда неаутентифицированный пользователь попадает на этот маршрут. Это работает отлично, однако я хотел бы настроить его так, чтобы пользователь перенаправлялся на страницу, к которой он первоначально пытался получить доступ.

Я добавил data к своему маршруту, чтобы яможет передать параметр page, а затем перенаправить на соответствующую страницу после входа в систему. Это не работает, так как я не могу получить содержимое data;большинство попыток привело к ошибке. То, что я имею ниже, не является ошибкой, однако оно не работает, так как data возвращается пустым {}

app-routing-module.ts

const routes: Routes = [
    {
        path: 'map',
        loadChildren: './map/map.module#MapPageModule',
        canActivate: [AuthGuard],
        data: {
            page: 'map'
        }
    },
    {
        path: 'collections',
        loadChildren: './collections/collections.module#CollectionsPageModule',
        canActivate: [AuthGuard],
        data: {
            page: 'collections'
        }
    },
];

login.page.ts

import { Router, ActivatedRoute } from '@angular/router';

constructor(
    private activatedRoute: ActivatedRoute
) {}

login(formData: any) {
    ...

    if(this.activatedRoute.snapshot.data.page === 'map') {
        this.router.navigate(['/map']);
    }

    ...
}

Когда я регистрирую следующее, я получаю undefined

console.log(this.activatedRoute.snapshot.data.page);

Как мне получить содержимое data, чтобы я мог видеть значение страницы?

Answer 1

Понял.

data не передавалось на login.page.ts, однако было передавалось на auth.guard.ts, поэтому все, что мне нужно было сделать, это захватитьэто там и отправить его как queryParam на login.page.ts

auth.guard.ts

import { Router, CanActivate, ActivatedRouteSnapshot } from '@angular/router';

canActivate(route: ActivatedRouteSnapshot): Promise<boolean> {
    ...
    this.router.navigate(['/login'], { queryParams: route.data });
    ...
}

login.page.ts

import { Router, ActivatedRoute } from '@angular/router';

page: any;

constructor(public route: ActivatedRoute) {
    this.route.queryParams.subscribe((res) => {
        this.page = res.page;
    });
}

login(formData: any) {
    if (this.page === 'map') {
        this.router.navigate(['/map']);
    }
}