如何获取Ionic 4中ActivatedRoute的值？

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，但是它was被传递给了auth.guard.ts，所以我要做的就是将其捕获并作为queryParam发送给[C0 ]

auth.guard.ts

login.page.ts

login.page.ts

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

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