如何在 Ionic 4 中获取 ActivatedRoute 的值？

Question

我有两个需要身份验证的页面，因此我创建了一个 AuthGuard，当未经身份验证的用户访问该路由时，它将重定向到登录表单。这工作得很好，但是，我想对其进行设置，以便将用户重定向到他们最初尝试访问的页面。

我已经在我的路由中添加了data，这样我就可以传递一个page参数，然后在登录后重定向到合适的页面。这不起作用，因为我无法获取 data 的内容；大多数尝试都导致了错误。我下面的内容没有错误，但是它也不起作用，因为 data 返回为空 {}

应用程序路由-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']);
    }
}

如何在 Ionic 4 中获取 ActivatedRoute 的值？

How can I get the value of ActivatedRoute in Ionic 4?

ionic-framework

angular

ionic4

应用程序路由-module.ts

login.page.ts

auth.guard.ts

login.page.ts