1

我的实际组件和应用程序要复杂一些。但是，我只是想看看我是否缺少一些简单的东西。我无法从 ActivatedRoute 获取正确的 paramMap。当 url 还包含 queryParams 时会发生这种情况。

示例网址： www.example.org/event/d162f2c2-5bbe-414c-9961-60ab6f489dc5?blah=foo

下面的控制台日志将 eventId 打印为d162f2c2-5bbe-414c-9961-60ab6f489dc5?blah=foo

只有当我从应用程序外部的链接（即电子邮件或其他网站）打开 URL 时，才会发生这种情况。或者，如果我将 url 复制并粘贴到新的浏览器窗口中。刷新页面使 eventId 在没有 queryParams 的情况下正确记录。但是，为什么它不适用于从外部链接进行初始页面加载？

import { Component, OnInit} from '@angular/core';
import { ActivatedRoute, Router, ParamMap} from '@angular/router';

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.scss']
})
export class LayoutComponent implements OnInit {

  constructor( private route: ActivatedRoute) {}

  ngOnInit() {

    this.route.paramMap
      .subscribe((params: ParamMap) => {
        console.log('eventId', params.get('eventId'));
      });
  }

}

该路线是一个延迟加载的模块。主路由有一个如下所示的路由：

{
        path: 'videos',
        component: VideosLayoutComponent,
        canActivate: [AuthGuard, CategoriesExistsGuard],
        children: [
            {
                path: '',
                loadChildren: () =>
                    import('../routes/videos/videos.module').then(m => m.VideosModule),
                data: {title: 'Videos Portal'},
            },
        ]
    },

然后在 videos.module 内部是定义 eventId 的路由。VideosDetailComponent 是我试图获取 eventId 的地方：

{
        path: 'detail/:eventId',
        component: VideosDetailComponent,
        canActivate: [],
        data: {title: 'Video Details'},
    },

这个太诡异了 如果应用程序已经加载并且我复制粘贴 url 并点击返回以重新加载页面，则 eventId 正确记录。仅当您在未加载应用程序的情况下打开新的浏览器窗口，然后复制粘贴 url。eventId 未正确记录。

OMG，我想我已经想通了。在我的 AuthGuard 中，我使用了一些逻辑router.navigate([redirectUrl]);但是由于 url 包含 queryParams，当我切换到它时router.navigateByUrl(redirectUrl)，它可以正常工作。

4

0 回答 0